个人中心
gpt4 book ai didi

javascript - 我的简单计算器无法运行。我想在按钮单击事件上使用事件监听器

转载 作者：行者123 更新时间：2023-12-01 01:12:24 25 4
gpt4 key购买 nike

我想实现以下目标:

  1. 创建一个简单的计算器，用于对两个数字进行加、乘、减和除运算。
  2. 三个文本框，分别包含输入 number1、输入 number2 和结果
  3. 四个按钮，分别为加、减、除、乘
  4. 四个函数add()、subtract()、multiply()、divide()，分别对两个输入数字执行加法、减法、乘法和除法。
  5. 每个函数都应在第三个(结果)文本框中显示结果。
  6. 向所有按钮添加“click”事件监听器，并使用上述函数名称作为处理程序
  7. 输入验证。在每个处理函数内部，对文本框值使用 isNaN() 函数，以确保用户输入数字而不是字母或其他字符。显示警报以通知用户。
  8. 确保用户在单击任何按钮时不会将任何文本框留空。使用 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>

最佳答案

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

关于javascript - 我的简单计算器无法运行。我想在按钮单击事件上使用事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55055766/

25 4 0
文章推荐： javascript - PHP 在单选按钮上将单选值发布到下一页
文章推荐： javascript - 如何使用 AJAX 插入具有不同连接 ID 的同一个表
文章推荐： iis-7 - bundle 不适用于映射的虚拟目录
文章推荐： javascript - 切片数组中的节点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com