JavaScript 'calculator ' 添加最后一个 parseFloat 时未提供 'running total'

Question

我正在尝试根据用户的 selection 构建一个基本的销售计算器。下面的代码工作正常，除了一个问题...

随着“+ parseFloat(e)”属性被移除，用户得到了一个不错的运行总计，因为他们 select 或 deselect 他们的选择。但是...当我尝试将该方面添加回方程式时，它不会产生总数，直到所有 select 离子都已完成。

相反...它只会产生“$NaN”，直到生成所有 select 离子。

我希望能够使用等式中包含的“+ parseFloat(e)”属性实现方便的 'running total'。我似乎无法让它发挥作用。

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 = .00</option>
  <option value="2">2 Scoops = .00</option>

</select>

<br>
<br>

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

<select id="plus" class="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 .00

<br>
<br>

<select id="plus" class="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 .00

<br>
<br>

<select id="plus" class="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 .00

<br>
<br>
<br>

<select id="plus" class="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 = .00</option>
  <option value="2">Cone = .00</option>

</select>

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

Answer 1

当你有一个空字符串时，ParseFloat 将输出 NaN。请改用 Number(x)。

Answer 2

您可以保留您的 parseFloat（阅读有关使用 Number() 作为 @sorold suggest 也是一个好主意）并通过为您的勺子和锥形选择提供默认值“0”来实现您正在寻找的东西：

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 = .00</option>
  <option value="2">2 Scoops = .00</option>

</select>

<br>
<br>

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

<select id="plus" class="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 .00

<br>
<br>

<select id="plus" class="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 .00

<br>
<br>

<select id="plus" class="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 .00

<br>
<br>
<br>

<select id="plus" class="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 = .00</option>
  <option value="2">Cone = .00</option>

</select>

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

之前出现 NaN 错误的原因是这两个选项的默认选项没有值，parseFloat 计算结果为 undefined。因此，当您尝试将所有值组合成一个总数时，您实际上是在计算，例如 1 + 2 + 1 + undefined.

JavaScript 'calculator ' 添加最后一个 parseFloat 时未提供 'running total'

JavaScript 'calculator ' not providing 'running total' when adding last parseFloat

javascript