DOM节点添加点击事件结合switch制作一个简易计算器

120 阅读1分钟

image.png

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>

  <body>
    <input type="text" id="num1" />
    <select id="operate">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" id="num2" />
    <input type="button" value=" = " id="btn" />
    <input type="text" id="result" />
  </body>
  <script>
    // 当等号被点击的时候,才开始判断
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      var num1 = parseInt(document.getElementById("num1").value);
      var num2 = parseInt(document.getElementById("num2").value);
      var result = document.getElementById("result");
      var num3 = 0;
      var operate = document.getElementById("operate").value;

      switch (operate) {
        case "+":
          num3 = num1 + num2;
          break;
        case "-":
          num3 = num1 - num2;
          break;
        case "*":
          num3 = num1 * num2;
          break;
        case "/":
          num3 = num1 / num2;
          break;
      }
      result.value = num3;
    };
  </script>
</html>