JS_lesson5

https://codelove.tw/@howtomakeaturn/post/63r1lx

by j437437

HTML

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css' rel='stylesheet' />
  <!-- bootstrap5.2.3 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container my-5">
    <form class="row justify-content-center mb-3">
      <div class="col-8 py-3 bg-light">
        <label for="username" class="form-label mb-1">請輸入您的大名</label>
        <input type="text" class="form-control mb-3" id="username" placeholder="王小明">
        <div class="row mb-5">
          <p class="mb-1">請選擇產品</p>
          <div class="col-6">
            <select id="gender" class="form-select col-6" aria-label="選擇性別">
              <option value="" selected>選擇性別</option>
              <option value="male">男裝</option>
              <option value="female">女裝</option>
            </select>
          </div>
          <div class="col-6">
            <select id="item" class="form-select" aria-label="選擇品項">
              <option value="" selected>選擇品項</option>
              <option value="coat">外套</option>
              <option value="clothes">上衣</option>
              <option value="pants">下身</option>
            </select>
          </div>
        </div>
        <button type="button" class="btn btn-outline-primary btn-sm" onclick="inquiryFunction()">
          我要訂購
        </button>
        <button type="button" class="btn btn-outline-primary btn-sm" onclick="introFunction()">
          認識工廠
        </button>
      </div>
    </form>
    <div id="order" class="row justify-content-center d-none">
      <div class="col-8 py-3 bg-dark text-white">
        <h3>訂購完成</h3>
        <p>感謝您的訂購</p>
        <p class="mb-0">
          顧客姓名：<span id="customerId"></span><br>
          產品類別：<span id="orderCategory"></span><br>
          訂購品項：<span id="orderItem"></span>
        </p>
      </div>
...

JavaScript

function inquiryFunction() {
  const username = document.getElementById('username').value;
  alert(`${username} 您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`)
  promoteAlert();
  showOrder();
}

function introFunction() {
  const username = document.getElementById('username').value;
  alert(username + ' 您好！我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！')
}

function promoteAlert() {
  const gender = document.getElementById('gender');
  const index = gender.selectedIndex
  const text = gender.options[index].text
  if (text == "男裝") {
    alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！');
  } else if (text == "女裝") {
    alert('最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！');
  }
}

function showOrder() {
  const order = document.getElementById('order');
  order.classList.remove('d-none');
  getName();
  getGender();
  getItem();
}

function getName() {
  const username = document.getElementById('username').value;
  document.getElementById('customerId').textContent = username;
}

function getGender() {
  const gender = document.getElementById('gender');
  const index = gender.selectedIndex
  const text = gender.options[index].text
  document.getElementById('orderCategory').textContent = text;
}

function getItem() {
  const item = document.getElementById('item');
  const index = item.selectedIndex
  const text = item.options[index].text
  document.getElementById('orderItem').textContent = text;
}