Ignore NaN when adding input values in JavaScript

Question

I have the following code:

var inputsArray = document.getElementsByTagName('input');

function computeTotal() {
  var tot = 0;
  tot += parseFloat(inputsArray[0].value);
  tot += parseFloat(inputsArray[1].value);
  tot += parseFloat(inputsArray[2].value);
  inputsArray[3].value = tot;
}

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text" disabled></input>
<button type="button" onclick="computeTotal()">Calculate</button>

It calculates fine when a number is entered in all three boxes, but I would like it to calculate even if a box is left empty, when in fact returns NaN.

P.S.: I know I could use a "for" loop and the isNaN() method to skip blank inputs, but I'm really looking for a solution for adding the inputs one by one.

I do not want to convert the NaN to 0.

`var val0 = inputsArray[0].value; tot += isNaN(val0 || val0=="")? 0:parseFloat(val0);` — mplungjan, Jan 25 '18 at 16:17
just make default values of boxes as 0... or check and display validation when its not a valid number — sumeet kumar, Jan 25 '18 at 16:19

score 1 · Answer 1 · edited Mar 16 '22 at 12:51

1

You can do something like this for each line:

if (!isNaN(inputsArray[0].value)) {  tot += parseFloat(inputsArray[0].value);}

edited Mar 16 '22 at 12:51

Peter Mortensen

30,738
21
105
131

answered Jan 25 '18 at 16:19

Léo R.

2,620
1
10
22

Thats wrong. the value ist not "NAN" but when you convert it to a float it returns "NaN". – flx Jan 25 '18 at 16:21
Why ? i test if is not a number and if false i do the operation – Léo R. Jan 25 '18 at 16:36
explain your downvote ? cause this work i just don't check empty input – Léo R. Jan 25 '18 at 16:37
Ok I'll take the downvote back , though your answer does not directly relate to the question. He is was looking for checking `isNaN()` **after** executing `parseFloat()` on the value. – flx Jan 26 '18 at 05:32

score 1 · Answer 2 · edited Mar 16 '22 at 12:52

1

With the help of the ternary operator you can do something like the following:

var inputsArray = document.getElementsByTagName('input');

function computeTotal(){
  var tot = 0;
  tot += (isNaN(inputsArray[0].value) || inputsArray[0].value=="") ? 0 : parseFloat(inputsArray[0].value);
  tot += (isNaN(inputsArray[1].value) || inputsArray[1].value=="") ? 0 : parseFloat(inputsArray[1].value);
  tot += (isNaN(inputsArray[2].value) || inputsArray[2].value=="") ? 0 : parseFloat(inputsArray[2].value);
  inputsArray[3].value = tot;
}

<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text" disabled></input>
<button type="button" onclick="computeTotal()">Calculate</button>

edited Mar 16 '22 at 12:52

Peter Mortensen

30,738
21
105
131

answered Jan 25 '18 at 16:26

Mamun

66,969
9
47
59

I have chosen the simpler answer as correct; however this also worked perfectly, thank you! – Gramacho Jan 25 '18 at 16:34
1

@Gramacho, you are most welcome. I appreciate you to accept the answer which serves your purpose best. Just to remind you, one draw back with the the answer you have accepted is, that will not work if any of the `input`s mistakenly have strings like `hello, hi, john` etc. Because `1*hello` will give you `NaN`....thanks again. – Mamun Jan 25 '18 at 16:54

score -2 · Accepted Answer · edited Mar 16 '22 at 12:51

-2

Multiply your value by 1 to cast it as an integer:

parseFloat(1*inputsArray[0].value);

edited Mar 16 '22 at 12:51

Peter Mortensen

30,738
21
105
131

answered Jan 25 '18 at 16:21

Sylvan LE DEUNFF

682
1
6
21

Very simple and effective! Thank you! – Gramacho Jan 25 '18 at 16:31
2

That yields NaN when I run it with the value being an uncastable string (eg "bob"). – Paul Jan 25 '18 at 17:22
1

It also does NOT **ignore** NaN. – mplungjan Jan 26 '18 at 06:47
It answers the question which was "when a field is empty". Obviously, it would be better to check the user input and prevent submit if the field can't be recongnize as a number – Sylvan LE DEUNFF Jan 26 '18 at 07:25

Ignore NaN when adding input values in JavaScript

3 Answers3