JSFiddle - React, Tailwind, and code Playground

by dfg312546

HTML

<input class="inputStyle" id="name" type="text"/ placeholder="請輸入姓名">

<select id="gender">
  <option value="male">男裝</option>
  <option value="female">女裝</option>
</select>

<select id="cloth">
  <option value="coat">外套</option>
  <option value="shirt">上衣</option>
  <option value="pants">下身</option>
</select>

<hr>
<button onclick="buy()" class="buttonStyle">
我要訂購
</button>
<button onclick="know()" class="buttonStyle">
認識工廠
</button>

<div class="orderStyle">
  您的訂單<br>
  <div>顧客姓名：<span id="customerName"></span><div/>
  <div>服裝分類：<span id="genderType"></span><div/>
  <div >服裝類型：<span id="clothType"></span><div/>
</div>

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:15px;
  line-height: 3;
  padding:10px;
  width:25%;
}

JavaScript

function buy () {
	let nameInput = document.getElementById("name").value;
  
  let genderSelect = document.getElementById("gender");
  let genderIndex = genderSelect.selectedIndex;
  let genderText = genderSelect.options[genderIndex].text;
  
  let clothSelect = document.getElementById("cloth");
  let clothIndex = clothSelect.selectedIndex;
  let clothText = clothSelect.options[clothIndex].text
  
  
	alert( `${nameInput}您好，謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`);
  document.getElementById("customerName").textContent = nameInput;
  document.getElementById("genderType").textContent = genderText;
  document.getElementById("clothType").textContent = clothText;
}

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