I am attempting to construct a basic sales calculator, based on the user's selections. The code below works fine, except for one issue...

With the ' parseFloat(e)' attribute removed, the user gets a nice, running total as they select or deselect their options. However... when I attempt to add that aspect back into the equation, it will not produce a total until all selections have been made.

Instead... it will only produce '$NaN', until all selections are made.

I would like to be able to achieve the handy 'running total' with the ' parseFloat(e)' attribute included in the equation. I can't seem to get that to function.

function calcuMath() {
  var z;
  var a = document.getElementById("scoops").value;
  var b = document.getElementById("nuts").value;
  var c = document.getElementById("sprinkles").value;
  var d = document.getElementById("syrup").value;
  var e = document.getElementById("dish").value;
  var sel = document.getElementById("plus");
  var selection = sel.options[sel.selectedIndex].value;
  var more = document.getElementById("add");
  if (selection == "add") {
    z = parseFloat(a)   parseFloat(b)   parseFloat(c)   parseFloat(d)   parseFloat(e);
  }
  document.getElementById("result").innerHTML = ""   z   "";
}

.plus {
  display: none;
}

<h1>Ice Cream Calculator</h1>

<p>To calculate the price of your Ice Cream, please make your selections below.</p>

<br>

<select id="scoops" name="scoops" onchange="calcuMath()" required>

  <option selected="true" disabled="disabled">How Many Scoops?</option>
  <option value="1">1 Scoop = $1.00</option>
  <option value="2">2 Scoops = $2.00</option>

</select>

<br>
<br>

<p>Toppings: (Optional)</p>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<input type="hidden" id="nuts" name="nuts" value="0">
<input type="checkbox" onchange="this.previousSibling.value=1-this.previousSibling.value; 
    calcuMath();">&nbspNuts $1.00

<br>
<br>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<input type="hidden" id="sprinkles" name="sprinkles" value="0">
<input type="checkbox" onchange="this.previousSibling.value=1-this.previousSibling.value; 
    calcuMath();">&nbspSprinkles $1.00

<br>
<br>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<input type="hidden" id="syrup" name="syrup" value="0">
<input type="checkbox" onchange="this.previousSibling.value=1-this.previousSibling.value; 
    calcuMath();">&nbspSyrup $1.00

<br>
<br>
<br>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<select id="dish" name="dish" onchange="calcuMath()" required>

  <option selected="true" disabled="disabled">Cup or Cone</option>
  <option value="1">Cup = $1.00</option>
  <option value="2">Cone = $2.00</option>

</select>

<br>
<br>
<br> TOTAL: $
<a id="result"></a>

CodePudding user response：

ParseFloat will output NaN when you have an empty string. Use Number(x) instead.

CodePudding user response：

You can retain your parseFloat (reading up on using Number() as @sorold suggest would also be a good idea) and achieve what you're looking for by giving a default value of '0' to your scoop & cone selection:

function calcuMath() {
  var z;
  var a = document.getElementById("scoops").value;
  var b = document.getElementById("nuts").value;
  var c = document.getElementById("sprinkles").value;
  var d = document.getElementById("syrup").value;
  var e = document.getElementById("dish").value;
  var sel = document.getElementById("plus");
  var selection = sel.options[sel.selectedIndex].value;
  var more = document.getElementById("add");
  if (selection == "add") {
    z = parseFloat(a)   parseFloat(b)   parseFloat(c)   parseFloat(d)   parseFloat(e);
  }
  document.getElementById("result").innerHTML = ""   z   "";
}

.plus {
  display: none;
}

<h1>Ice Cream Calculator</h1>

<p>To calculate the price of your Ice Cream, please make your selections below.</p>

<br>

<select id="scoops" name="scoops" onchange="calcuMath()" required>

  <option value='0' selected="true" disabled="disabled">How Many Scoops?</option>
  <option value="1">1 Scoop = $1.00</option>
  <option value="2">2 Scoops = $2.00</option>

</select>

<br>
<br>

<p>Toppings: (Optional)</p>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<input type="hidden" id="nuts" name="nuts" value="0">
<input type="checkbox" onchange="this.previousSibling.value=1-this.previousSibling.value; 
    calcuMath();">&nbspNuts $1.00

<br>
<br>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<input type="hidden" id="sprinkles" name="sprinkles" value="0">
<input type="checkbox" onchange="this.previousSibling.value=1-this.previousSibling.value; 
    calcuMath();">&nbspSprinkles $1.00

<br>
<br>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<input type="hidden" id="syrup" name="syrup" value="0">
<input type="checkbox" onchange="this.previousSibling.value=1-this.previousSibling.value; 
    calcuMath();">&nbspSyrup $1.00

<br>
<br>
<br>

<select id="plus" >
  <option value="add" id="add"> </option>
</select>

<select id="dish" name="dish" onchange="calcuMath()" required>

  <option value='0' selected="true" disabled="disabled">Cup or Cone</option>
  <option value="1">Cup = $1.00</option>
  <option value="2">Cone = $2.00</option>

</select>

<br>
<br>
<br> TOTAL: $
<a id="result"></a>

The reason for your NaN error before is that the default options for those two selections had no value, which parseFloat evaluates to undefined. Hence, when you try to combine all the values into a total, you were actually calculating, for example, 1 2 1 undefined.