How do I give values[1] the value 0 to avoid getting NaN as result in Javascript?

Question

I am trying to create a program that adds 6 input values between them, but If i don't give a value (for example, if I give only 5 values) the result is NaN. So I tried to give the empty values the value of 0 using a for loop and an if statement, but It's not working. May I have your help please?

Code:

document.getElementById("b").onclick = function() {

  var values = new Array();
  values[0] = document.getElementById("x").value;
  values[1] = document.getElementById("y").value;
  values[2] = document.getElementById("z").value;
  values[3] = document.getElementById("a").value;
  values[4] = document.getElementById("g").value;
  values[5] = document.getElementById("c").value;

  for (i = 0; i < values.length; i++) {
    if (isNaN(values[i])) {
      values[i] = 0;
    }
  }

  var risultato = parseFloat(values[0]) + parseFloat(values[1]) + parseFloat(values[2]) + parseFloat(values[3]) + parseFloat(values[4]) + parseFloat(values[5]);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato + ".";
}

<form>
  <input type="number" placeholder="Valore 1" id="x" required>

  <input type="number" placeholder="Valore 2" id="y" required>

  <input type="number" placeholder="Valore 3 (se presente)" id="z">

  <input type="number" placeholder="Valore 4 (se presente)" id="a">

  <input type="number" placeholder="Valore 5 (se presente)" id="g">

  <input type="number" placeholder="Valore 6 (se presente)" id="c">

  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

Edit: This is not a duplicate because the question that I wrote here (Why can't I do addition between 4 variables in JavaScript but I can do it with 3 variables?) is about the addition, and this one is about the isNaN value.

[Consider using `[]` instead of `new Array()`](https://stackoverflow.com/a/1273936/3689450) — VLAZ, Dec 23 '17 at 15:39
Possible duplicate of [Why can't I do addition between 4 variables in JavaScript but I can do it with 3 variables?](https://stackoverflow.com/questions/47948215/why-cant-i-do-addition-between-4-variables-in-javascript-but-i-can-do-it-with-3) — , Dec 23 '17 at 15:57

H77 · Accepted Answer · 2017-12-24T06:04:13.970

isNaN on an empty string return false as an empty string is interpreted as zero (which is a number). Call parseFloat on your value before you check for NaN. parseFloat returns NaN for empty strings. Another option would be to simply check if the string is empty.

i.e. if (isNaN(parseFloat(values[i])) or (values[i].length === 0)

e.g.

document.getElementById("b").onclick = function() {

  var values = new Array();
  values[0] = document.getElementById("x").value;
  values[1] = document.getElementById("y").value;
  values[2] = document.getElementById("z").value;
  values[3] = document.getElementById("a").value;
  values[4] = document.getElementById("g").value;
  values[5] = document.getElementById("c").value;

  for (i = 0; i < values.length; i++) {
    if (isNaN(parseFloat(values[i]))) {
      values[i] = 0;
    }
  }

  var risultato = parseFloat(values[0]) + parseFloat(values[1]) + parseFloat(values[2]) + parseFloat(values[3]) + parseFloat(values[4]) + parseFloat(values[5]);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato + ".";
}

<form>
  <input type="number" placeholder="Valore 1" id="x" required>
  <input type="number" placeholder="Valore 2" id="y" required>
  <input type="number" placeholder="Valore 3 (se presente)" id="z">
  <input type="number" placeholder="Valore 4 (se presente)" id="a">
  <input type="number" placeholder="Valore 5 (se presente)" id="g">
  <input type="number" placeholder="Valore 6 (se presente)" id="c">
  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

A simpler way of doing what you want would be something like this. (parseFloat(a) || 0) means if a isNaN it will be replaced with 0.

document.getElementById("b").onclick = function() {

  var values = [
    document.getElementById("x").value,
    document.getElementById("y").value,
    document.getElementById("z").value,
    document.getElementById("a").value,
    document.getElementById("g").value,
    document.getElementById("c").value
  ];

  var risultato = values.reduce(function(a, b) {
    return (parseFloat(a) || 0) + (parseFloat(b) || 0);
  }, 0);

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + risultato + ".";
}

<form>
  <input type="number" placeholder="Valore 1" id="x" required>
  <input type="number" placeholder="Valore 2" id="y" required>
  <input type="number" placeholder="Valore 3 (se presente)" id="z">
  <input type="number" placeholder="Valore 4 (se presente)" id="a">
  <input type="number" placeholder="Valore 5 (se presente)" id="g">
  <input type="number" placeholder="Valore 6 (se presente)" id="c">
  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

Could you explain the first part more easily please? – Pier Dec 23 '17 at 17:06 — Pier, Dec 23 '17 at 17:06

score 1 · Answer 2 · answered Dec 23 '17 at 18:07

Add a class name for each input. Get all inputs using document.querySelectorAll(). Iterate the inputs array. Convert each value to a string using the + sign, and add a fallback || 0 to 0 if the result is NaN. Collect them all in the sum variable.

document.getElementById("b").onclick = function() {
  var inputs = document.querySelectorAll('.number'); // get all elements with the .number class
  var sum = 0; // init sum

  for (i = 0; i < inputs.length; i++) {
    sum += +inputs[i].value || 0; // convert each value to a number, if it's isNaN subtitute 0
  }

  document.getElementById("risultato").innerHTML = "La massa del prodotto è " + sum + ".";
}

<form>
  <input type="number" placeholder="Valore 1" class="number" required>

  <input type="number" placeholder="Valore 2" class="number" required>

  <input type="number" placeholder="Valore 3 (se presente)" class="number">

  <input type="number" placeholder="Valore 4 (se presente)" class="number">

  <input type="number" placeholder="Valore 5 (se presente)" class="number"">

  <input type="number" placeholder="Valore 6 (se presente)" class="number">

  <input type="button" class="btn btn-primary" id="b" value="Applica" />
</form>

<div id="risultato" class="desc"></div>

How do I give values[1] the value 0 to avoid getting NaN as result in Javascript?

2 Answers2