JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<label for="name">請輸入姓名:</label><br>
<input type="text" class="name">
<p class="warn"></p>
<br>
<label for="clothesClassify">服裝分類</label><br>
<select name="clothesClassify" id="clothesClassify">
  <option value="man">男裝</option>
  <option value="woman">女裝</option>
</select>
<br>
<label for="clothesClass">衣服種類</label><br>
<select name="clothesClass" id="clothesClass">
  <option value="coat">外套</option>
  <option value="Shirt">上衣</option>
  <option value="trousers">下身</option>
</select>
<br>
<button onClick="myBtn()">
  我要訂購
</button>

<p>您的訂單</p>
<hr>
<p>顧客姓名 : <span class="customerName"></span> </p>
<p>服裝分類 : <sapn class="customerSex"></sapn></p>
<p>服裝類型 : <span class="customerType"></span></p>

CSS

input,select{
  width: 250px;
  padding: 5px;
  text-align: center;
  margin: 5px 0px;
  border: 0px;
  border-radius:15px ;
  background: #FFCCFF;
  color:#000000;
}
button{
  width: 250px;
  padding: 5px;
  border: 0px;
  border-radius:15px ;
  cursor:pointer;
  margin-top: 15px;
  background: #330066;
  color: #FFF;
}
p{
  color: #4C0099;
}
.warn{
  margin: 0;
  font-size: 12px;
  color:red;
}

JavaScript

function myBtn(){
  //取得姓名
  let name = document.querySelector('.name').value
 	let customerName = document.querySelector('.customerName')
  customerName.textContent = name
  let warn = document.querySelector('.warn')
  if(name === ''){
  	warn.textContent = '請輸入姓名'
  }
	
  
  //取得服裝分類
  let clothesClassify = document.querySelector('#clothesClassify');
  let customerSex =  document.querySelector('.customerSex')
  //取得Option表單選項的值
  let classifyIndex = clothesClassify.selectedIndex;
  let classifyIndexValue = clothesClassify.options[classifyIndex].value;
  let classifyIndexText = clothesClassify.options[classifyIndex].text;
  customerSex.textContent = classifyIndexText
  
  //取得服裝種類
	let clothesClass = document.querySelector('#clothesClass');
  let customerType =  document.querySelector('.customerType')
  //取得Option表單選項的值
  let clothesClassIndex = clothesClass.selectedIndex;
  let clothesClassValue = clothesClass.options[clothesClassIndex].value;
  let clothesClassText = clothesClass.options[clothesClassIndex].text;
  customerType.textContent = clothesClassText;
  
  alert('感謝您的訂購')
  //判斷男裝女裝
  if(classifyIndexText === '男裝'){
  	alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！')
  }else{
  	alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！')
  }
}