javascript - 使用 JavaScript 函数链接 html &lt;input&gt; 和 <output>

Question

所以我有这段代码，它基本上执行一个简单的数学函数，但现在我不知道如何链接 <input>和 <output>使用 JavaScript 标记，以便当用户在 <input> 中输入数字时脚本运行，结果显示在 <output> 中 感谢任何帮助，请提供帮助，因为我仍在学习。

function computation(number) { 
  let newNumber = number + (1/100 * number) + 1000;
  let roundedNumber = Math.round(newNumber/100)*100;
  return roundedNumber;
}

<p>Enter Amount Here:</p>
<input type="text" name="value"></input>
<button class="button" onClick="computation()">Calculate!</button>
<p>Final Amount</p>
<div class="output">
    <output for="roundedNumber" name="finalAmount"></output>
</div>

Answer 1

请按照以下简单步骤操作。 1)将id添加到您的输入和输出标签中，只需与名称相同

<input type="text" name="value" id="value" />
<output for="roundedNumber" name="finalAmount" id="finalAmount"/>

2)使用js document.getElementById("inputid").value

let num = document.getElementById("value").value

3) 用同样的方法设置值。假设您想在段落标记中显示它。

<p id="output"></p>
document.getElementById("output").innerHTML =newNum;

4) 对于事件标记，请使用 .innerHTML 的 .value 实例