In this example on the official website, the onforminput event seems not to be executed, the code:
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用 output 元素的简易计算器：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>
</body>Please give me some advice
Then I will give you some advice, the code has been The test passed, haha, the html5 tag, the core is not js.
Principle: Change output to input, and then use the onClick event.
To put it simply, change to That's it. Then after running, click directly on the last input box. Be sure to click on the input box.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>使用 output 元素的简易计算器：</p>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<input id="result" onclick="resCalc()" />
</form>
</body>
</html>I'm just confused about why the example on the official website doesn't work.
The code is wrong and the event method is wrong.
The above is the detailed content of Solution to the failure of the onforminput event of the output tag in HTML5. For more information, please follow other related articles on the PHP Chinese website!
and
tags in html
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
