添加最后一個 parseFloat 時 JavaScript 'calculator' 不提供'running total'

Question

我正在嘗試根據用戶的選擇構建一個基本的銷售計算器。 下面的代碼工作正常，除了一個問題......

刪除 '+ parseFloat(e)' 屬性后，用戶在選擇或取消選擇選項時會得到一個不錯的運行總計。 但是......當我嘗試將該方面添加回等式時，在做出所有選擇之前它不會產生總數。

相反......它只會產生'$NaN'，直到做出所有選擇。

我希望能夠使用方程式中包含的“+ parseFloat(e)”屬性來實現方便的“運行總計”。 我似乎無法讓它發揮作用。

 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" 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 $1.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 $1.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 $1.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 = $1.00</option> <option value="2">Cone = $2.00</option> </select> <br> <br> <br> TOTAL: $ <a id="result"></a>

Answer 1

您可以保留您的parseFloat （閱讀使用Number()作為@sorold 建議也是一個好主意）並通過為您的勺子和圓錐選擇提供默認值“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 = $1.00</option> <option value="2">2 Scoops = $2.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 $1.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 $1.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 $1.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 = $1.00</option> <option value="2">Cone = $2.00</option> </select> <br> <br> <br> TOTAL: $ <a id="result"></a>

之前出現NaN錯誤的原因是這兩個選擇的默認選項沒有值， parseFloat評估為undefined 。 因此，當您嘗試將所有值組合成一個總數時，您實際上是在計算，例如1 + 2 + 1 + undefined 。

Answer 2

當您有一個空字符串時，ParseFloat 將輸出 NaN。 請改用 Number(x)。