JSFiddle - React, Tailwind, and code Playground

by dfg312546

HTML

<input class="inputStyle" id="name" type="text"/ placeholder="請輸入姓名">
<hr>
<button onclick="buy()" class="buttonStyle">
我要訂購
</button>

<div class="orderStyle">
您的訂單<br>
顧客姓名：
<span id="customerName" color="red"></span>
</div>

<button onclick="know()" class="buttonStyle">
認識工廠
</button>

CSS

.buttonStyle {
  border-radius:5px;
  border: none;
  padding:5px;
  margin:5px;
}

.buttonStyle:hover {
  background-color:#000000;
  color:#ffffff;
}

.inputStyle{
  border-style:solid;
  border-radius:5px;
  padding:5px;
  width:25%;
  margin:5px;
}

.orderStyle{
  border-style:dashed;
  font-size:12px;
  line-height: 3;
  padding:10px;
  width:25%;
}

JavaScript

function buy () {
	let nameInput = document.getElementById("name").value
	alert( `${nameInput}您好，謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`)
  document.getElementById("customerName").textContent = nameInput
}

function know () {
	alert("我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！")
}