这是一个较大项目的一小部分。为什么它不输出四个数字的总和并显示在第五个文本框中？<body><form action="acknolcupcard" method="post" name="CupCard" id="CupCard" target="_self"><p></p><input name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/><input name="OneH2" type="number" value="0" size="5" maxlength="5" onchange="calc"/><input name="OneH3" type="number" value="0" size="5" maxlength="5" onchange="calc"/><input name="OneH4" type="number" value="0" size="5" maxlength="5" onchange="calc"/><label for="S1TotH"></label><input type="text" name="S1TotH" id="S1TotH" value="0" size= "10" maxlength= "10"/> </form><script type="text/javascript">function calc(){var S1TotH =<br />document.getElementById('OneH1').value +document.getElementById('OneH2').value +document.getElementById('OneH3').value +document.getElementById('OneH4').value;document.getElementById('S1TotH').value = S1TotH;}</script></body>
3 回答
噜噜哒
TA贡献1784条经验 获得超7个赞
您需要添加 id 作为属性：
<input id="OneH1" name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/>
此外，为了调用该方法，您应该创建一个处理程序：
<script type="text/javascript">
function calc() {
// This doesn't work since <br/> has no type (e.g. var S1TotH = '<br />')
var S1TotH =<br />
/* This values need to be stored in a variable or used in some way
(e.g. var S1TotH = document.getElementById('OneH1').value + document...). But be careful because in this way you are concatenating the
values, not adding them. If you want to add them you
should convert them to numbers (e.g. parseFloat(document.getElementById('OneH1').value)) */
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;
document.getElementById('S1TotH').value = S1TotH;
}
// use 'input' or 'change' event
document.querySelector('input').addEventListener('input', function () {
calc();
});
</script>
慕森王
TA贡献1777条经验 获得超3个赞
你不调用函数
提及变量的名称（即使该变量的值是函数）不会调用该函数。
你需要把(argument, list)它放在后面。
onchange="calc()"
内在事件属性虽然有很多问题（例如这个），但最好避免。
您可以改用委托的事件侦听器。
function calc(event) {
const input = event.target;
console.log(input.value);
}
document.querySelector("form").addEventListener("change", calc);
<form>
<input type="number">
<input type="number">
<input type="number">
<input type="number">
</form>
你没有ids
然后它会运行，但会出错，因为您使用getElementById的元素没有id属性。
您正在连接不添加
一旦你解决了这个问题，你仍然不会将值相加，因为+服务器作为连接运算符的双重职责和值是strings。
您需要将它们转换为数字（例如使用parseFloat）。
catspeake
TA贡献1111条经验 获得超0个赞
这段代码应该可以工作，使用oninput而不是onchange来反映实时变化，我也解决了一些其他错误。
<body>
<form action="acknolcupcard" method="post" name="CupCard" id="CupCard" target="_self">
<p></p>
<input name="OneH1" id="OneH1" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH2" id="OneH2" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH3" id="OneH3" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<input name="OneH4" id="OneH4" type="number" value="0" size="5" maxlength="5" oninput="calc()"/>
<label for="S1TotH"></label>
<input type="text" name="S1TotH" id="S1TotH" value="0" size= "10" maxlength= "10"/>
</form>
<script type="text/javascript">
function calc(){
var S1TotH =
document.getElementById('OneH1').value +
document.getElementById('OneH2').value +
document.getElementById('OneH3').value +
document.getElementById('OneH4').value;
document.getElementById('S1TotH').value = S1TotH;
}
</script>
</body>
上面的代码将连接这些值，因为到目前为止这些都是字符串值，因此如果要将其转换为数字，则需要使用parseInt()函数
添加回答
举报
0/150
提交
取消