onclick 事件触发时调用的函数中的 Javascript switch 语句

Question

我的 HTML 是这样的:

 <h3>Please enter your discount code</h3>
    <input type="text" name="discountCode" id="discountCode">
    <div id="message"></div>
    <button id="myButton"  onclick="myFunction()">Click Me</button>

当我点击按钮时，我希望调用 myFunction() 触发该事件。

我的 JavaScript 是这样的:

 function myFunction(){
    var discount;
    var discount = document.getElementById("discountCode").innerHTML;
    switch(discount){
        case "SAVE10":
        document.getElementById("message").innerHTML = "you are saving 10% on this order.";
        break;

        case "SAVE15":
        document.getElementById("message").innerHTML = "you are saving 15% on this order.";
        break;

        default:
        document.getElementById("message").innerHTML = "please enter a valid discount code.";
        break;
    }
}

我想将消息输出到“消息”的 div 元素。当我运行此代码并输入折扣代码时，输​​出到消息 div 的唯一行是默认行:

please enter a valid discount code.

任何人都可以引导我朝着正确的方向前进。

谢谢!

Answer 1

使用 .value 而不是 .innerHTML 从 input 标签中获取值。

检查以下内容:

function myFunction() {
  var discount = document.getElementById("discountCode").value;
  switch (discount) {
    case "SAVE10":
      document.getElementById("message").innerHTML = "you are saving 10% on this order.";
      break;

    case "SAVE15":
      document.getElementById("message").innerHTML = "you are saving 15% on this order.";
      break;

    default:
      document.getElementById("message").innerHTML = "please enter a valid discount code.";
      break;
  }
}

<h3>Please enter your discount code</h3>
<input type="text" name="discountCode" id="discountCode">
<div id="message"></div>
<button id="myButton" onclick="myFunction()">Click Me</button>

同时删除了您申报两次的 var discount。这不是必需的。

阅读此以获取更多信息:https://www.w3schools.com/jsref/prop_text_value.asp