带按钮的简单计算器不起作用

Question

我试图使用按钮制作一个简单的计算器，但是在提交表单时，结果元素似乎超出了范围，因为我的按钮单击事件存储了计算结果，因此，无法从另一个 function 调用它。 我也尝试使用'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>

带按钮的简单计算器不起作用

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-07-04 15:21:08

解决方案2
0 2020-07-04 15:39:56

带按钮的简单计算器不起作用

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-07-04 15:21:08

解决方案2 0 2020-07-04 15:39:56

解决方案1
0 已采纳 2020-07-04 15:21:08

解决方案2
0 2020-07-04 15:39:56