JSFiddle - React, Tailwind, and code Playground

by dfg312546

HTML

<input class="inputStyle" id="name" type="text" placeholder="請輸入姓名"/>
<input class="inputStyle" id="numbers" 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>訂購數量：<span id="numbersBuy"></span></div>
  <div>初步估價：<span id="pricesBuy"></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:90%;
}

JavaScript

function buy () {
	let nameInput = document.getElementById("name").value;
  let numbersInput = document.getElementById("numbers").value;
  let prices
  
  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
  
  if (!nameInput) {
  	alert("煩請填寫您的大名。")
    return
    } ;
  if (!numbersInput) {
  	alert("煩請輸入訂購數量。")
    return
    } ;
 
  if (numbersInput < 100) {
    alert("抱歉，我們工廠的最低出貨量是 100 件。")
    return
  }
  else if (numbersInput > 5000) {
    alert("抱歉，我們工廠的最高出貨量是 5,000 件。")
    return
  };
  
	alert( `${nameInput}您好，謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`)
  if (genderText == "男裝") {
  	alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！")
    prices = parseInt(numbersInput * 600)
  }
  else {
  	alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！")
    prices = parseInt(numbersInput * 500)
  }
  
  document.getElementById("customerName").textContent = nameInput;
  document.getElementById("genderType").textContent = genderText;
  document.getElementById("clothType").textContent = clothText;
  document.getElementById("numbersBuy").textContent = numbersInput;
  document.getElementById("pricesBuy").textContent = prices
}

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