javascript - 如何让 onclick 按钮替换函数值而不是添加它们

Question

我在 HTML 表单中创建了一个简单的加法计算器，以便更好地了解 javascript。 javascript 看起来像这样 -

function add() {
var x = document.getElementById("numberOne").value;
var y = document.getElementById("numberTwo").value; 
return parseInt(x) + parseInt(y);
}

HTML -

<form>
<input id="numberOne" type="number"/></br>
<input id="numberTwo" type="number"/></br>
<input type="button" value="Calculate"
onclick="document.body.appendChild(document.createTextNode(add()));"/>
</form>

现在，单击按钮后，它只是将值添加为一条直线。例如，如果我输入 5 和 5 并单击计算 3 次，我将得到 101010 而不是 10 3 次。

我希望它可以替换输出，或者将其显示在单独的一行而不是一条直线上。

Answer 1

您可以创建一个单独的结果 div，然后每次都覆盖它:

<form>
<input id="numberOne" type="number"><br>
<input id="numberTwo" type="number"><br>
<div id="result"></div>
<input type="button" value="Calculate"
onclick="document.getElementById('result').innerText = add();">
</form>