您可以使用HTML的<output>
元素来显示计算结果。要使用它,您需要将结果放在for
属性中指定的元素中,并将结果作为该元素的子元素。以下是一个示例代码:
<label for="num1">第一个数字:</label>
<input type="number" id="num1" name="num1"><br>
<label for="num2">第二个数字:</label>
<input type="number" id="num2" name="num2"><br>
<output for="num1 num2" id="result"></output>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
document.getElementById("num1").addEventListener("input", calculate);
document.getElementById("num2").addEventListener("input", calculate);
</script>
在上面的代码中,我们使用<output>
元素来显示计算结果,并在JavaScript代码中使用document.getElementById()
方法来获取输入框的值,计算它们的总和,然后将结果放入<output>
元素中。
在<output>
元素中,我们使用for
属性来指定所属的输入框,用于计算结果。此外,我们还为<output>
元素指定了一个唯一的id
属性,以便在JavaScript代码中引用它。
请注意,<output>
元素不支持value
属性,因此我们必须使用.textContent
或.innerHTML
属性来设置其内容。
希望这可以帮助您了解如何在HTML中使用<output>
元素来显示计算结果。