Why does my javascript not output the total of four numbers in an html form?

Question

This is a small part of a larger project. Why does it not output the total of the four number and display in the fifth text box?

<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>

The even handler function is never called. Notice also, that you're getting strings as a value, you'd might want to convert them to numbers before doing math with the values. And `gEBI` doesn't get element by name. — Teemu, Apr 01 '20 at 09:44

axl-code · Answer 1 · 2020-04-01T10:13:05.753

You need to add id as an attribute:

<input id="OneH1" name="OneH1" type="number" value="0" size="5" maxlength="5" onchange="calc"/>

Also in order to call the method you should create a handler:

<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>

Quentin · Answer 2 · 2020-04-01T09:53:35.320

You don't call the function

Mentioning the name of a variable (even if the value of that variable is a function) doesn't call the function.

You need to put (argument, list) after it.

 onchange="calc()"

Intrinsic event attributes have a bunch of problems though (e.g this one) and are best avoided.

You could use a delegated event listener instead.

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>

You have no `id`s

Then it will run, but error, because you are using getElementById without having elements with id attributes.

You are concatenating not adding

Once you fix that, you will still not be adding up the values because + servers double duty as the concatenation operator and values are strings.

You need to convert them to numbers (e.g. with parseFloat).

Irshad Ahmed Akhonzada · Answer 3 · 2020-04-01T09:57:33.640

This code should work, use oninput instead of onchange for live changes reflect, I resolved few other errors too.

<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>

Above code will concate the values as these are strings values so far so you need to use the parseInt() function if you want to convert it into numbers

Yes, it is concatenating. I will add the parsint() but I am a bit confused at I thought that using type= "number" ensured that it went through as a number without having to do that. — Roy Caswell, Apr 01 '20 at 14:35
@RoyCaswell no brother it won't, It will just tweak the control as a spinner but the value still be in string — Irshad Ahmed Akhonzada, Apr 01 '20 at 14:38

Why does my javascript not output the total of four numbers in an html form?

3 Answers3

You don't call the function

You have no ids

You are concatenating not adding

You have no `id`s