Question

我想实现以下目标：

创建一个简单的计算器，将两个数字相加，相乘，相减和相除。
三个分别包含输入数字1，输入数字2和结果的文本框
四个按钮，分别进行加，减，除和乘
四个函数add（），subtract（），multiple（），divide（）分别对两个输入数字执行加，减，乘和除运算。
每个函数应在第三个（结果）文本框中显示结果。
将“ click”事件侦听器添加到所有按钮，并将上述函数名称用作处理程序
输入验证。在每个处理程序函数内部，对文本框值使用isNaN（）函数，以确保用户输入数字，而不输入字母或其他字符。显示警报以通知用户。
请确保用户在单击任何按钮时不会将任何文本框留空。使用value =“”来确保这一点。显示警报以通知用户。

我无法使用的代码如下：

<html>
    <body>
      
        <h1> Calculator</h1>
        <input type="text" id="textbox1" placeholder="Enter number 1" >
        <input type="text" id="textbox2" placeholder="Enter number 2" >
        <input type="text" id="textbox3" placeholder="Results" ><br><br>
        <input type="button" id="button1" value="Add">
        <input type="button" id="button2" value="Subtract">
        <input type="button" id="button3" value="Multiply">
        <input type="button" id="button4" value="Devide">

        <script>
        
        var button1 = document.getElementById("button1");
        button1.addEventListener("click",add);
        var button2 = document.getElementById("button2");
        button2.addEventListener("click",subtract);
        var button3 = document.getElementById("button3");
        button3.addEventListener("click",multiply);
        var button4 = document.getElementById("button4");
        button4.addEventListener("click",devide);
        function add(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 + num2;
        }
        function subtract(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 - num2;
        }
        function multiply(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 * num2;
        }
        function devide(){
            var num1 = parseInt(document.getElementById('textbox1').value);
            var num2 = parseInt(document.getElementById('textbox2').value);
            document.getElementById("textbox3").innerHTML = num1 / num2;
        }
        </script>
    </body>
</html>

Answer 1

文本框没有有意义的innerHTML。代替document.getElementById("...").innerHTML = ...，使用document.getElementById("...").value = ...。

我的简单计算器无法正常工作。我想在按钮单击事件上使用事件监听器

1 个答案: