为什么我的 javascript 不能以 html 形式输出四个数字的总数？

3回答

噜噜哒

您需要添加 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>

0 0

慕森王

你不调用函数提及变量的名称（即使该变量的值是函数）不会调用该函数。你需要把(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）。

0 0

catspeake

这段代码应该可以工作，使用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 0