解决方案:
<!DOCTYPE html> <html> <head> <script> function addNumbers() { // 获取两个输入框中的值 var num1 = parseInt(document.getElementById("number1").value); var num2 = parseInt(document.getElementById("number2").value); // 将两个数相加 var result = num1 + num2; // 将结果显示在结果框中 document.getElementById("result").innerHTML = "结果:" + result; } </script> </head> <body> <h1>简单加法器</h1> <input type="text" id="number1" placeholder="请输入第一个数"> <input type="text" id="number2" placeholder="请输入第二个数"> <button onclick="addNumbers()">计算</button> <div id="result"></div> </body> </html>
解题步骤:
1、创建一个HTML页面,包含一个标题、两个输入框、一个按钮和一个用于显示结果的容器;
2、在按钮的onclick事件中,调用JavaScript函数addNumbers();
3、在addNumbers()函数中,首先获取两个输入框中的值,并使用parseInt()函数将其转换为整数;
4、 将两个数相加,得到加法结果;
5、最后,将结果显示在结果容器中,通过innerHTML属性修改结果容器的内容;
6、在示例代码中,使用getElementById()函数通过元素的id获取DOM元素,value属性获取输入框中的值,innerHTML属性设置结果容器的内容。
以上是使用JavaScript实现一个简单的加法器的示例。通过输入两个数,点击计算按钮后,将两个数相加的结果显示在页面上。