JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列一：第6課 ── 認識資料型態與轉換</h1>

<div class="order">
  <form class="data">
    <div class="customer">
      <label for="customer">訂購人姓名</label>
      <input type="text" name="customer" id="customer" placeholder="訂購人姓名" required>
    </div>

    <div class="gender">
      <label for="gender">服裝分類</label>
      <select name="gender" id="gender" required>
        <option value="" disabled selected>請選擇</option>
        <option value="male">男裝</option>
        <option value="female">女裝</option>
      </select>
    </div>

    <div class="outfit">
      <label for="outfit">服裝類型</label>
      <select name="outfit" id="outfit" required>
        <option value="" disabled selected>請選擇</option>
        <option value="coat">外套</option>
        <option value="top">上衣</option>
        <option value="bottom">下身</option>
      </select>
    </div>

    <div class="count">
      <label for="count">訂購數量</label>
      <input type="text" name="count" id="count" placeholder="數量" required>
    </div>
  </form>

  <div class="buttons">
    <button onclick="myFunc()">我要訂購</button>
    <button onclick="myFunc2()">認識工廠</button>
  </div>
  <div class="order-check">
    <h2>您的訂單</h2>
    <p>顧客姓名：<span id="nameCheck"></span></p>
    <p>服裝分類：<span id="genderCheck"></span></p>
    <p>服裝類型：<span id="outfitCheck"></span></p>
    <p>訂購數量：<span id="countCheck"></span></p>
    <p>初步估價：<span id="price"></span></p>
  </div>
</div>

CSS

.order {
  width: 400px;
  margin: 50px auto;
  padding: 50px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.data {
  margin-bottom: 20px;
}

.data>div {
  margin: 20px;
}

.data,
.buttons {
  width: 100%;
  font-size: 0;
}

.data label,
.data input {
  display: inline-block;
  font-size: 18px;
  vertical-align: middle;
}

.data label {
  width: 30%;
}

.data input,
.data select {
  width: 70%;
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
  vertical-align: middle;
  height: 30px;
}

button {
  width: 50%;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #ccc;
}

.order-check {
  margin-top: 20px;
  background-color: #253a7e;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
}

.order-check h2 {
  text-align: center;
  color: rgb(211, 211, 68);
}

.order-check p {
  text-align: left;
  color: rgb(211, 211, 68);
}

JavaScript

function myFunc() {
  // 取得顧客姓名的值(字串)
  let customerName = document.getElementById("customer").value;

  // 取得性別、服裝類型物件
  let gender = document.getElementById("gender");
  let outfit = document.getElementById("outfit");
  // 取得以選取的性別、服裝類型物件之index
  let genderIndex = gender.selectedIndex;
  let outfitIndex = outfit.selectedIndex;
  // 取得以選取的性別、服裝類型物件之index對應的外顯文字
  let genderText = gender.options[genderIndex].text;
  let outfitText = outfit.options[outfitIndex].text;

  // 取得數量的值(字串)
  let count = document.getElementById("count").value;
  // 將字串值轉成數字類型
  let countNumber = parseInt(count);
  // 定義男裝、女裝單價
  let mUnit = 600;
  let fUnit = 500;

  if (customerName == "") {
    alert("請輸入姓名");
  } else if (gender.value == "") {
    alert("請選擇服裝分類");
  } else if (outfit.value == "") {
    alert("請選擇服裝類型");
  } else if (count == "" || count == "0") {
    alert("請填入訂購數量");
  } else {
    document.getElementById("nameCheck").textContent = customerName;
    document.getElementById("genderCheck").textContent = genderText;
    document.getElementById("outfitCheck").textContent = outfitText;
    document.getElementById("countCheck").textContent = countNumber;
    alert(
      customerName +
      " 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！"
    );
    if (gender.value == "male") {
      // 顯示男裝報價總額
      document.getElementById("price").textContent = countNumber * mUnit;
      alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！");
    }
    if (gender.value == "female") {
      // 顯示女裝報價總額
      document.getElementById("price").textContent = countNumber * fUnit;
      alert("最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！");
    }
  }
}

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