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

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

洗掉 ' 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>

uj5u.com熱心網友回復：

您可以保留您的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.

uj5u.com熱心網友回復：

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

標籤：javascript

上一篇：使用Enter鍵使復選框起作用

下一篇：如何在反應中改變狀態？