单击事件未选择正确的开关选项

Onclick event not selecting the correct switch option

本文关键字：开关 选项 事件 选择 单击      更新时间：2023-09-26

我的onclick事件没有找到开关选项。我确信我有错误的元素，但不知道在哪里。任何帮助都将是美妙的！在继续使用剩余的输入值之前，我只做了前几步来验证它是否正常工作。

<html>
<head>
  <title>Operators</title>
  <script>
      function calcValue(elem) {
        var firstNumber = document.getElementById("firstNumber").value;
        var secondNumber = document.getElementById("secondNumber").value;
        var operator = document.getElementById("operator").value;
        operator = elem.value;
        switch (operator) {
          case "add":
            alert(firstNumber + " + " + secondNumber + " = " + (firstNumber +  secondNumber));
            break;
          case "div":
            alert(firstNumber + " / " + secondNumber + " = " + (firstNumber / secondNumber));
            break;
          case "mod":
            alert(firstNumber + " % " + secondNumber + " = " + (firstNumber % secondNumber));
            break;
          case "multiply":
            alert(firstNumber + " * " + secondNumber + " = " + (firstNumber * secondNumber));
            break;
          case "subtract":
            alert(firstNumber + " - " + secondNumber + " = " + (firstNumber - secondNumber));
            break;
        }
      }
  </script>
</head>
<body>
  <p>firstNumber is 5</p>
  <p>secondNumber is 12</p>
    <p id="operator"></p>
    <input type="button" value="Addition" onclick="calcValue('add'.this);">
    <input type="button" value="Division" onclick="calcValue('div'.this);">
    <input type="button" value="Modulus" onclick="calcValue('mod');">
    <input type="button" value="Multiplication" onclick="calcValue('multiply');">
    <input type="button" value="Subtraction" onclick="calcValue('subtract');">
    <input type="button" value="Negation" onclick="calcValue('neg');">
    <br />
    <input type="button" value="Equals ==" onclick="calcValue('equalto');">
    <input type="button" value="Not Equals !=" onclick="calcValue('notequalto');">
    <input type="button" value="Greater Than >" onclick="calcValue('greater');">
    <input type="button" value="Less Than <" onclick="calcValue('less');">
    <input type="button" value="Greater Than or Equal >=" onclick="calcValue('greaterequals');">
    <input type="button" value="Less Than or Equal <=" onclick="calcValue('lessequals');">
</body>
</html>

我会这样做：

查看演示

<body>
  <p id="firstNum">firstNumber is 5</p>
  <p id="secondNum">secondNumber is 12</p>
  <input type="button" value="Addition" onclick="calcValue('add');">
  <input type="button" value="Division" onclick="calcValue('div');">
  <input type="button" value="Modulus" onclick="calcValue('mod');">
  <input type="button" value="Multiplication" onclick="calcValue('multiply');">
  <input type="button" value="Subtraction" onclick="calcValue('subtract');">
  <input type="button" value="Negation" onclick="calcValue('neg');">
  <br />
  <input type="button" value="Equals ==" onclick="calcValue('equalto');">
  <input type="button" value="Not Equals !=" onclick="calcValue('notequalto');">
  <input type="button" value="Greater Than >" onclick="calcValue('greater');">
  <input type="button" value="Less Than <" onclick="calcValue('less');">
  <input type="button" value="Greater Than or Equal >=" onclick="calcValue('greaterequals');">
  <input type="button" value="Less Than or Equal <=" onclick="calcValue('lessequals');">
  <script type="text/javascript">
    function calcValue(elem) {
      var firstNumber = document.getElementById("firstNum").textContent;
      firstNumber = firstNumber.match(/'d+/);
      var secondNumber = document.getElementById("secondNum").textContent;
      secondNumber = secondNumber.match(/'d+/);
      switch (elem) {
        case "add":
            alert(firstNumber + " + " + secondNumber + " = " + (parseInt(firstNumber) + parseInt(secondNumber)));
            break;
        case "div":
            alert(firstNumber + " / " + secondNumber + " = " + (parseInt(firstNumber) / parseInt(secondNumber)));
            break;
        case "mod":
            alert(firstNumber + " % " + secondNumber + " = " + (parseInt(firstNumber) % parseInt(secondNumber)));
            break;
        case "multiply":
            alert(firstNumber + " * " + secondNumber + " = " + (parseInt(firstNumber) * parseInt(secondNumber)));
            break;
        case "subtract":
            alert(firstNumber + " - " + secondNumber + " = " + (parseInt(firstNumber) - parseInt(secondNumber)));
            break;
      }
    }
  </script>
</body>

乍一看，我看到了两三个问题，但最相关的是，我在您的HTML代码中找不到id为firstNumber和secondNumber的任何元素。参见注释：

  function calcValue(elem) {
    // NOTE: Your are trying to get an element by an id that does not exist.
    var firstNumber = document.getElementById("firstNumber").value;
    // NOTE: Again, your are trying to get an element by an id that does not exist.
    var secondNumber = document.getElementById("secondNumber").value;
    var operator = document.getElementById("operator").value;
    // NOTE: Are you sure you are calling calcValue with an HTMLElement?
    operator = elem.value;
    switch (operator) {
      case "add":
        alert(firstNumber + " + " + secondNumber + " = " + (firstNumber +  secondNumber));
        break;
      case "div":
        alert(firstNumber + " / " + secondNumber + " = " + (firstNumber / secondNumber));
        break;
      case "mod":
        alert(firstNumber + " % " + secondNumber + " = " + (firstNumber % secondNumber));
        break;
      case "multiply":
        alert(firstNumber + " * " + secondNumber + " = " + (firstNumber * secondNumber));
        break;
      case "subtract":
        alert(firstNumber + " - " + secondNumber + " = " + (firstNumber - secondNumber));
        break;
    }
  }

此外，要小心传递给onclick属性中的calcValue的内容。Javascript会"悄无声息"地失败，它会给你一种什么都没发生的印象。

相关文章：