如何使用 setAttribute 在文本框中的答案之前添加文本，但仅在打印结果之后

Question

我希望它读取已计算的数字），其中已计算的数字是前两个文本框相加的结果（我也在使用 window.onload 那个这就是为什么我的脚本在文件的头部。

 function setUpEvents() { function add_number() { var first_number = parseInt(document.getElementById("tb1").value); var second_number = parseInt(document.getElementById("tb2").value); var result = first_number + second_number; document.getElementById("tb3").value = result; }; } window.onload = function() { setUpEvents(); };

 <div> <h1>Add two number using text box as input using javascript</h1> </div> Enter First Number: <br> <input type="text" id="tb1" name="TextBox1"> <br> Enter Second Number: <br> <input type="text" id="tb2" name="TextBox2"> <br> Result: <br> <input type="text" id="tb3" name="TextBox3"> <br> <input type="button" name="b1" value="GO" onclick="add_number()">

Answer 1

只需删除 setUpEvents 就不会将 scope 中的 function 用于内联事件处理程序

同时删除内联事件处理程序

请改用 eventListeners。 我将按钮的名称更改为 id

 function add_number() { var first_number = parseInt(document.getElementById("tb1").value); var second_number = parseInt(document.getElementById("tb2").value); var result = first_number + second_number; document.getElementById("tb3").value = "The-number-that-has-been-computed is "+ result; }; window.addEventListener("load", function() { document.getElementById("b1").addEventListener("click", add_number); });

 input { width: 300px }

 <div> <h1>Add two number using text box as input using javascript</h1> </div> Enter First Number: <br> <input type="text" id="tb1" name="TextBox1"> <br> Enter Second Number: <br> <input type="text" id="tb2" name="TextBox2"> <br> Result: <br> <input type="text" id="tb3" name="TextBox3"> <br> <input type="button" id="b1" value="GO" />

Answer 2

我希望它读取已计算的数字）其中已计算的数字是添加前两个文本框的结果（我也在使用 window.onload这就是为什么我的脚本位于文件头部的原因。

 function setUpEvents() { function add_number() { var first_number = parseInt(document.getElementById("tb1").value); var second_number = parseInt(document.getElementById("tb2").value); var result = first_number + second_number; document.getElementById("tb3").value = result; }; } window.onload = function() { setUpEvents(); };

 <div> <h1>Add two number using text box as input using javascript</h1> </div> Enter First Number: <br> <input type="text" id="tb1" name="TextBox1"> <br> Enter Second Number: <br> <input type="text" id="tb2" name="TextBox2"> <br> Result: <br> <input type="text" id="tb3" name="TextBox3"> <br> <input type="button" name="b1" value="GO" onclick="add_number()">