JSFiddle - React, Tailwind, and code Playground

HTML

<h1 style="text-align: center;">JavaScript 系列一：第4課 ── 基本的陣列操作</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>
  </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>
  </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");

  let genderIndex = gender.selectedIndex;
  let outfitIndex = outfit.selectedIndex;

  let genderText = gender.options[genderIndex].text;
  let outfitText = outfit.options[outfitIndex].text;

  if (customerName == "") {
    alert("請輸入姓名");
  } else if (gender.value == "") {
    alert("請選擇服裝分類");
  } else if (outfit.value == "") {
    alert("請選擇服裝類型");
  } else {
    document.getElementById("nameCheck").textContent = customerName;
    document.getElementById("genderCheck").textContent = genderText;
    document.getElementById("outfitCheck").textContent = outfitText;
    alert(
      customerName +
      " 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！"
    );
  }
}

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