按钮不起作用的简易计算器

Question

我试图用按钮做一个简单的计算器，但当提交表单时，result元素似乎超出了范围，因为我的按钮单击事件存储了计算结果，因此无法从另一个函数调用它。我也试过使用'var‘，但没有用。我是编程领域的新手，所以如果可能的话，请详细解释。以下是代码：

//HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>
<body>
    <form>
        <input type="number" name="num1" id="num1">
        <button name="calc" id="add" value="add">+</button>
        <button name="calc" id="sub" value="sub">-</button>
        <button name="calc" id="mul" value="mul">*</button>
        <button name="calc" id="divi" value="divi">/</button>
        <input type="number" name="num2" id="num2">
        <button type="submit" value="result" id="res">=</button>
        <input type="number" name="result" id="num3">
    </form>
</body>
</html>

//JAVASCRIPT

    <script>
        const form = document.querySelector('form');
        const btn = document.querySelector('button');

        btn.addEventListener('click', e =>{
            const num1 = parseFloat(document.querySelector('#num1').value);
            const num2 = parseFloat(document.querySelector('#num2').value);

            if(btn.value === 'add'){
                var num3 = num1 + num2;
            }
            else if(btn.value === 'sub'){
                var num3 =  num1 - num2;
            }
            else if(btn.value === 'mul'){
                var num3 =  num1 * num2;
            }
            else if(btn.value === 'divi'){
                var num3 =  num1 / num2;
            }
            else{
                console.log('that is not a number!');
            }
        });

        form.addEventListener('submit', e =>{
            e.preventDefault();
            form.result.value = num3;
        });
    </script>

Answer 1

在顶部的事件侦听器外部声明var num3 = ""；

const form = document.querySelector('form');
const btn = document.querySelector('button');
var num3 = "";

在你的事件监听器中，你可以像下面这样使用它：

num3 = parseInt(num1) + parseInt(num2);

您使用的是querySelector，它只提供第一个DOM元素，您需要将其更改为querySelectorAll以获取dom中的所有按钮，然后遍历它以查找每个按钮的值。

下面是适用于所有运算符的小提琴。https://jsfiddle.net/9w3hjyk2/2/

完整代码：

const form = document.querySelector('form');
const button = document.querySelectorAll('button');
var num3 = "";

button.forEach(function(btn) {
    btn.addEventListener('click', e => {
        const num1 = parseFloat(document.querySelector('#num1').value);
        const num2 = parseFloat(document.querySelector('#num2').value);
        if (btn.value === 'add') {
            num3 = parseInt(num1) + parseInt(num2);
        } else if (btn.value === 'sub') {
            console.log("num3", num1 - num2)
            num3 = parseInt(num1) - parseInt(num2);
        } else if (btn.value === 'mul') {
            num3 = parseInt(num1) * parseInt(num2);
        } else if (btn.value === 'divi') {
            num3 = parseInt(num1) / parseInt(num2);
        } else {
            console.log('that is not a number!');
        }
    });
});


form.addEventListener('submit', e => {
    e.preventDefault();
    form.result.value = num3;
});

Answer 2

我想你错过了一场onclick的活动。研究我的代码并获得一些想法

​

      function dis(val) 
         { 
             document.getElementById("result").value+=val 
         } 
           

         function solve() 
         { 
             let x = document.getElementById("result").value 
             let y = eval(x) 
             document.getElementById("result").value = y 
         } 
           
       
         function clr() 
         { 
             document.getElementById("result").value = "" 
         } 

      .title{ 
         margin-bottom: 10px; 
         text-align:center; 
         width: 210px; 
         color:White; 
         border: solid black 2px; 
         } 
  
         input[type="button"] 
         { 
         background-color:whitesmoke; 
         color: black; 
         border: solid black 2px; 
         width:100% 
         } 
  
         input[type="text"] 
         { 
         background-color:white; 
         border: solid black 2px; 
         width:100% 
         } 

   </head> 
   <body> 
      <table border="1"> 
         <tr> 
            <td colspan="3"><input type="text" id="result"/></td> 
            <td><input type="button" value="c" onclick="clr()"/> </td> 
         </tr> 
         <tr> 
           
            <td><input type="button" value="1" onclick="dis('1')"/> </td> 
            <td><input type="button" value="2" onclick="dis('2')"/> </td> 
            <td><input type="button" value="3" onclick="dis('3')"/> </td> 
            <td><input type="button" value="/" onclick="dis('/')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="4" onclick="dis('4')"/> </td> 
            <td><input type="button" value="5" onclick="dis('5')"/> </td> 
            <td><input type="button" value="6" onclick="dis('6')"/> </td> 
            <td><input type="button" value="-" onclick="dis('-')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="7" onclick="dis('7')"/> </td> 
            <td><input type="button" value="8" onclick="dis('8')"/> </td> 
            <td><input type="button" value="9" onclick="dis('9')"/> </td> 
            <td><input type="button" value="+" onclick="dis('+')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="." onclick="dis('.')"/> </td> 
            <td><input type="button" value="0" onclick="dis('0')"/> </td> 
            <td><input type="button" value="=" onclick="solve()"/> </td> 
            <td><input type="button" value="*" onclick="dis('*')"/> </td> 
         </tr> 
      </table> 
   </body> 
</html> 

​