JS第五課作業

基本的 if/else 條件流程控制

by igorrrrr

HTML

<div class="orderWrap">
      <h1>線上下單</h1>
      <section>
        <div class="importingText">
          <div class="memberName">
            <label for="memberName">客戶名稱：</label>
            <input id="memberName" text="text" placeholder="請輸入姓名" />
          </div>
          <select id="memberStyle">
            <option value="none" disabled selected hidden>
              請選擇服裝分類
            </option>
            <option value="men">男裝</option>
            <option value="women">女裝</option>
          </select>
          <select id="memberTypes">
            <option value="none" disabled selected hidden>
              請選擇服裝類型
            </option>
            <option value="coat">外套</option>
            <option value="top">上衣</option>
            <option value="bottom">下身</option>
          </select>
        </div>

        <div class="buttons">
          <button onclick="booking()">我要訂購</button>
          <button onclick="understandus()">認識工廠</button>
        </div>
        <div class="orderContent">
          <p>您的訂單</p>
          <p>顧客姓名：<span id="OrderNameText"></span></p>
          <p>服裝分類：<span id="OrderStyleText"></span></p>
          <p>服裝類型：<span id="OrderTypesText"></span></p>
        </div>
      </section>
    </div>

CSS

* {
      padding: 0;
      margin: 0;
    }
    /* 以下為標題的設定 */
    .orderWrap {
      font-family: "Segoe UI", "Open Sans", "Helvetica Neue", sans-serif;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(0deg, #e66465, #9198e5);
    }

    h1 {
      padding: 10px 0;
      font-size: 20px;
      text-align: center;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
    section {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .importingText {
      display: flex;
      flex-direction: column;
      font-size: 18px;
    }
    .memberName {
      padding: 5px;
      height: 20px;
      margin: 10px;
    }
    .memberName label {
      height: 20px;
    }
    .memberName input {
      height: 20px;
      border-radius: 80px;
      outline: 0;
      border: 1px solid rgb(255, 255, 255, 0.4);
      caret-color: transparent;
      background-color: transparent;
      padding: 5px;
      font-size: 18px;
    }
    .memberName input:focus {
      border: 1px rgb(255, 255, 255, 0.4) solid;
      box-shadow: 1px 2px 1px rgb(255, 255, 255, 0.4);
    }

    .importingText select {
      height: 30px;
      margin: 10px;
      font-size: inherit;
      line-height: inherit;
      outline: none;
      border-radius: 10px;
      /* background: transparent; */
      /* background-color: #a88ac2; */
    }
    /* 設定服裝分類的底色 */
    .importingText #memberStyle {
      background-color: #a28ecc;
    }
    .importingText #memberStyle option {
      font-size: 15px;
      background-color: #a28ecd;
    }
    /* 設定服裝類別的底色 */
    .importingText #memberTypes {
      background-color: #a88ac2;
    }
    .importingText #memberTypes option {
      font-size: 15px;
      background-color: #a88ac2;
    }

    /* 以下為按鈕的設定 */
    .buttons {
      margin: 15px;
    }
    button {
      padding: 3px 18px;
      width: 100px;
      height: 40px;
      opacity: 1;
 ...

JavaScript

//點擊--我要訂購
    function booking() {
      let memberName = document.getElementById("memberName").value;
      //服裝分類
      let Style = document.getElementById("memberStyle");
      let StyleIndex = Style.selectedIndex;
      let StyleValue = Style.options[StyleIndex].value;
      let Styletext = Style.options[StyleIndex].text;
      //服裝類型 改用querySelector方法練習
      let TypesIndex = document.querySelector("#memberTypes").selectedIndex;
      let TypesText =
        document.querySelector("#memberTypes").options[TypesIndex].text;
      let TypesValue =
        document.querySelector("#memberTypes").options[TypesIndex].value;
      let selectnone = StyleValue != "none" && TypesValue != "none";

      switch (memberName) {
        case "":
          alert("請輸入姓名");
          break;

        default:
          if (selectnone != true) {
            alert("請選擇服裝分類以及服裝類型");
          } else {
            alert(
              memberName +
                "您好！\n" +
                "謝謝您對我們的衣服有興趣！\n請致電 0987-654-321，會有專人提供您報價"
            );
            if (StyleValue == "men") {
              alert(
                "最近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您帥氣領帶！"
              );
            } else if (StyleValue == "women") {
              alert(
                "近剛好是工廠週年慶，只要您今天來電下單，我們將贈送您美麗圍巾！"
              );
            }
            document.getElementById("OrderNameText").textContent = memberName;
            document.querySelector("#OrderStyleText").textContent = Styletext;
            document.querySelector("#OrderTypesText").textContent = TypesText;
          }
      }
    }
    function understandus() {
      alert("我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！");
    }