JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSclass1</title>
<!-- <script src="JS/jquery-3.6.0.min.js"></script> -->
<script src="JS/JSclass6.js"></script>
<link href="CSS/JSclass6.css" rel="stylesheet" type="text/css">
</head>
<body id="body">

    <div class="div_bg">
  
        <div class="class1-2">
          <button class="order" onclick="order()">我要訂購</button>
          <input class="keyword" id="keyword" type="text" placeholder="輸入用戶姓名">
          <button class="introduce" onclick="introduce()">&nbsp;認識工廠</button>
        </div>

        <div class="class4">

            <select class="select_gender" id="select_gender">
                <option value="none" selected disabled hidden>請選擇服裝分類</option>
                <option value="male">男裝</option>
                <option value="female">女裝</option>
            </select>

            <select class="select_type" id="select_type">
                <option value="none" selected disabled hidden>請選擇服裝類型</option>
                <option value="coat">外套</option>
                <option value="tshirt">上衣</option>
                <option value="pants">下身</option>
            </select>

            <input class="quantity" id="quantity" type="text" placeholder="輸入訂購數量">

        </div>
        
        <div class="class3">
          <div class="order_info">
            <p id="info1">－－－－－－－－－－</p>
            <p id="info2">｜您的訂單　　　　｜</p>
            <p id="info3">｜顧客姓名：ＸＸＸ｜</p>
            <p id="info4">｜服裝分類：ＸＸＸ｜</p>
            <p id="info5">｜服裝類型：ＸＸＸ｜</p>
            <p id="info6">｜初步估價：ＸＸＸ｜</p>
            <p id="info7">－－－－－－－－－－</p>
          </div>
        </div>

    </div>
	
</body>
</html>

CSS

.div_bg{
    width:500px;
    border-style:dashed;
    background-color:#D0D0D0;
  }
  
  .class1-2{
    width:500px;
    height:75px;
    
    display: flex;
    justify-content:space-evenly;
    align-items: center;  
  }
  
  .class3{
    width:500px;
    
    display: flex;
    justify-content:space-evenly;
    align-items: center;
  }

  .class4{
    width:500px;
    
    display: flex;
    justify-content:space-evenly;
    align-items: center;
  }
  
  .order{
    width:100px;
    height:30px;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
    font-family:Microsoft JhengHei;
  }
  .introduce{
    width:100px;
    height:30px;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
    font-family:Microsoft JhengHei;
  }
  .introduce:hover , .order:hover , .select_gender:hover , .select_type:hover{
    box-shadow: 0px 0px 6px 6px rgb(0,0,0);
    cursor: pointer;
  }
  
  .keyword{
    height:25px;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
    font-family:Microsoft JhengHei;
  }
  
  .order_info{
    width:425px;
    /*border-style:solid;*/
  }
  
  .select_gender{
    width:120px;
    height:30px;
    border-radius:10px;
    box-shadow: 0px 0px 3px 3px rgb(0,0,0);
    font-family:Microsoft JhengHei;
    background-color:#f0f0f0;
  }

  .select_type{
    width:120px;
    height:30px;
    border-radius:10px;
    box-shadow: 0px 0px 3px 3px rgb(0,0,0);
    font-family:Microsoft JhengHei;
    background-color:#f0f0f0;
  }

  .quantity{
    width:120px;
    height:25px;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
    font-family:Microsoft JhengHei;
  }

JavaScript

function order(){
	
  var keyword = document.getElementById('keyword').value;
  var index1 = document.getElementById('select_gender').selectedIndex;  //取索引值
  var index2 = document.getElementById('select_type').selectedIndex;
  var select_gender = document.getElementById('select_gender').options[index1].text;  //取選擇的text
  var select_type = document.getElementById('select_type').options[index2].text;
  var quantity = document.getElementById('quantity').value;

  if(keyword == ""){
  	alert('煩請填寫您的大名。');
  }
  else if(quantity == ""){
    alert('煩請輸入訂購數量。');
  }
  else if(select_gender == "請選擇服裝分類"){
    alert('煩請選擇服裝分類。');
  }
  else if(select_type == "請選擇服裝類型"){
    alert('煩請選擇服裝類型。');
  }
  else{

    if(quantity < 100){
      alert('抱歉，我們工廠的最低出貨量是 100 件。');
    }
    else if(quantity > 5000){
      alert('抱歉，我們工廠的最高出貨量是 5,000 件。');
    }
    else{
      alert( keyword +'您好!謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價!');
      if(select_gender == "男裝"){
        alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您[帥氣領帶]！");
        var price = 600 * parseInt(quantity);
      }
      else if(select_gender == "女裝"){
        alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您[美麗圍巾]！");
        var price = 500 * parseInt(quantity);
      }
    
      var info3 = "｜顧客姓名：" + keyword + "｜";
      var info4 = "｜服裝分類：" + select_gender + "｜";
      var info5 = "｜服裝類型：" + select_type + "｜";
      var info6 = "｜初步估價：" + price.toString() + "｜";
    
      document.getElementById('info3').textContent = info3;
      document.getElementById('info4').textContent = info4;
      document.getElementById('info5').textContent = info5;
      document.getElementById('info6').textContent = info6;
    }

  }

}


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