使用HTML JavaScript构建计算器，该计算器从两个输入标签中获取值，并在单击提交按钮时返回最终答案

Question

计算器，该计算器采用用户输入标签中写入的数字，然后在单击提交和显示结果时添加它们。

var numOne = document.getElementById("first");
var numTwo = 
document.getElementById("second");
var submit = document.getElementById("submit");
var added = document.getElementById("answer");
submit.addEventListner( function(){
var one = numOne.value;
var two = numTwo.value;
added.innerHTML = one + two;

}(请告诉我错误

Answer 1

html

<input type="number" id="a">
<input type="number" id="b">
<input type="submit" id="submit">
<h1 id="answer"></h1>

javascript

var submit = document.querySelector('#submit');
var answer = document.querySelector('#answer');
submit.addEventListener('click', () => {
    var a = document.querySelector('#a').value;
    var b = document.querySelector('#b').value;
    answer.textContent = Number(a) + Number(b);
})

这很简单，但可以扩展以正确验证输入并进行其他计算。

首先，如果您查看HTML，则可以看到两个数字输入字段和一个提交按钮。请注意，我给了它们所有ID，以便我们可以在JS文件中选择它们。我还提供了一个空的H1元素，在其中我们将显示计算的答案。

在JS文件中，我们只是在收听在提交按钮上的单击事件，我们捕获输入字段中输入的值并在将其类型施加到数字后将它们添加在一起。

最后，我们将这些值的总和返回到DOM中，作为H1元素的文本以下，ID ="答案"