Question

我的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>

Answer 1

我会这样做：

查看Demo

＆＃13;

<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>

＆＃13;

Answer 2

乍一看，我看到了一两个问题，但最相关的是我在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将失败＆＃34;默默地＆＃34;它会给你一种没有任何反应的印象。

Onclick事件未选择正确的开关选项

2 个答案:

查看Demo