html 计算两个input的值将结果显示在第三个input里面
时间: 2024-05-16 16:15:57 浏览: 14
您可以使用JavaScript来实现这个功能。首先,您需要在HTML文件中创建三个input元素,其中两个用于输入数字,第三个用于显示结果。例如:
```html
<input type="number" id="num1">
<input type="number" id="num2">
<input type="number" id="result" readonly>
```
接下来,您需要编写JavaScript代码来计算输入的值并将结果显示在第三个input元素中。您可以使用`getElementById()`方法获取输入元素的值,并使用`value`属性设置第三个input元素的值。例如:
```javascript
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var result = document.getElementById("result");
function calculate() {
var sum = parseInt(num1.value) + parseInt(num2.value);
result.value = sum;
}
```
在这个示例中,我们定义了一个名为`calculate()`的函数,它获取两个输入元素的值,将它们相加并将结果显示在第三个输入元素中。
最后,您需要将函数绑定到一个事件,以便在输入变化时自动计算结果。您可以使用`addEventListener()`方法将函数绑定到`input`事件上。例如:
```javascript
num1.addEventListener("input", calculate);
num2.addEventListener("input", calculate);
```
这样,当用户在输入框中输入数字时,计算函数将自动调用并更新结果。