JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
    <h2>Wholesale Factory</h2>
    <div>
        <span>請選擇性別: </span>
        <select id="mySex">
            <option value="mySex00">男裝</option>
            <option value="mySex01">女裝</option>
        </select>
    </div>

    <div>
        <span>請選擇商品: </span>
        <select id="myItem">
            <option value="myItem00">上衣</option>
            <option value="myItem01">外套</option>
            <option value="myItem02">褲子</option>
        </select>
    </div>

    <div>
        <label for="">訂購者:</label>
        <input id="inputName" type="text" placeholder="請輸入姓名" />
    </div>

    <div>
        <label for="">購買數:</label>
        <input id="inputNum" type="text" placeholder="請輸入件數" />
    </div>

    <div class="" w3-bar>
        <button class="w3-button w3-teal" onclick="clickBuy()">我要訂購</button>
        <button class="w3-button w3-red" onclick="clickIntro()">認識工廠</button>
    </div>

    <div>------------訂單明細-----------</div>
    <div id="orderName">｜顧客姓名：｜</div>
    <div id="orderClass">｜服裝分類：｜</div>
    <div id="orderItem">｜服裝類型：｜</div>
    <div id="orderNum">｜訂購數量：｜</div>
    <div id="orderPrice">｜初步估價：｜</div>
    <div>-------------------------------</div>
</body>

</html>

CSS

div {
    margin: 5px;
    border: 0;
    padding: 0;
}

#inputName {
    caret-color: green;
    outline-color: blue;
}

JavaScript

function clickBuy() {

    const selectMySex = document.getElementById("mySex");
    var index = selectMySex.selectedIndex;
    const selectMyItem = document.getElementById("myItem");
    var index2 = selectMyItem.selectedIndex;

    const name1 = document.getElementById('inputName').value;
    const textSex = selectMySex.options[index].text;
    var textNum = parseInt(document.getElementById('inputNum').value);
    var textPrice = 0;
    const textItem = selectMyItem.options[index2].text;

    if (name1 == "") {
        alert("請輸入姓名!")
    } else if (isNaN(textNum)) {
        alert("請輸入數量!")
    } else if (textNum < 100) {
        alert("抱歉，我們工廠的最低出貨量是 100 件。")
    } else if (textNum > 5000) {
        alert("抱歉，我們工廠的最高出貨量是 5,000 件。")
    } else {
        //Step1:警告提示中跳出使用者輸入的姓名，根據輸入的性別與數量進行計算，以及提示贈送不同禮物。
        alert(name1 + '您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！');

        if (textSex == "男裝") {
            alert("我們將贈送您帥氣領帶！");
            textPrice = 600 * textNum;
        }
        if (textSex == "女裝") {
            alert("我們將贈送您美麗圍巾！");
            textPrice = 500 * textNum;
        }

        //Step2:顯示出所有訂購資訊
        document.getElementById('orderName').textContent = "｜顧客姓名:" + name1 + "｜";
        document.getElementById('orderClass').textContent = "｜服裝類別:" + textSex + "｜";
        document.getElementById('orderItem').textContent = "｜服裝類型:" + textItem + "｜";
        document.getElementById('orderNum').textContent = "｜服裝數量:" + textNum + "｜";
        document.getElementById('orderPrice').textContent = "｜初步估價:" + textPrice + "｜";
    }
}

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