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

Question

I want to achieve following: 我要实现以下目标：

Create a simple calculator that adds, multiplies, subtracts, and divides two numbers. 创建一个简单的计算器，将两个数字相加，相乘，相减和相除。
Three text boxes that contain input number1, input number2, and result respectively 三个分别包含输入数字1，输入数字2和结果的文本框
Four buttons, add, subtract, divide, and multiply respectively 四个按钮，分别加，减，除和乘
Four functions add(), subtract(), multiply(), divide() to perform addition, subtraction, multiplication, and division respectively on the two input numbers. 四个函数add（），subtract（），multiple（），divide（）分别对两个输入数字执行加，减，乘和除运算。
Each function should display the result in the third(result) textbox. 每个函数应在第三个（结果）文本框中显示结果。
Add "click" event listeners to all buttons and use the above function names as handlers 将“ click”事件侦听器添加到所有按钮，并将以上函数名称用作处理程序
Input validation. 输入验证。 Inside each handler function use the isNaN() function on textbox values to ensure that the user enters digits and not alphabets or other characters. 在每个处理程序函数内部，对文本框值使用isNaN（）函数，以确保用户输入数字，而不输入字母或其他字符。 Display an alert to inform the user. 显示警报以通知用户。
Ensure that the user does not leave any textbox empty when clicking on any button. 单击任何按钮时，请确保用户不会将任何文本框留空。 Use value="" to ensure this. 使用value =“”来确保这一点。 Display an alert to inform the user. 显示警报以通知用户。

my not working code is down below: 我无法正常工作的代码如下：

 <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

Text boxes don't have a meaningful innerHTML . 文本框没有有意义的innerHTML 。 Instead of document.getElementById("...").innerHTML = ... , use document.getElementById("...").value = ... . 代替document.getElementById("...").innerHTML = ... ，请使用document.getElementById("...").value = ...

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

问题描述

1 个解决方案

解决方案1
2 2019-03-08 02:15:12

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

问题描述

1 个解决方案

解决方案1 2 2019-03-08 02:15:12

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

解决方案1
2 2019-03-08 02:15:12