如何計算不同選擇的選項值

Question

我試圖計算選定索引的值。下拉菜單是動態的，所以我可能會有3個下拉菜單，5個下拉菜單或8個下拉菜單。當我嘗試計算選定索引的值時，我得到NaN。我錯過了什麼嗎？

function calculate() { 
 
var calculationSpan = document.getElementById("calculationSpan"); 
 
var add; 
 
    var selects = document.querySelectorAll(".rooms"); 
 
    \t \t \t selects.forEach(function (select) { 
 
     var roomsOfType = select.options[select.selectedIndex].value; 
 
     \t \t \t if (roomsOfType != 0) { 
 
      add = parseInt(add) + parseInt(select.options[select.selectedIndex].value); 
 
      } 
 
     }); 
 
        calculationSpan.innerHTML = add; 
 
}

<select class="rooms"> 
 
<option value="0">0</option> 
 
<option value="1">One</option> 
 
<option value="2">Two</option> 
 
<option value="3">Three</option> 
 
</select> 
 

 

 
<select class="rooms"> 
 
<option value="0">0</option> 
 
<option value="1">One</option> 
 
<option value="2">Two</option> 
 
<option value="3">Three</option> 
 
<option value="4">Four</option> 
 
<option value="5">Five</option> 
 
<option value="6">Six</option> 
 
</select> 
 

 
<select class="rooms"> 
 
<option value="0">0</option> 
 
<option value="1">One</option> 
 
<option value="2">Two</option> 
 
<option value="3">Three</option> 
 
<option value="4">Four</option> 
 
</select> 
 

 
<button onclick="calculate()"> 
 
Calculate 
 
</button> 
 
<span id="calculationSpan"></span>

Answer 1

基本上你需要爲add起始值。

var add = 0; 

而且你要借錢Array#forEach，因爲selects就像對象數組，而不是一個數組。

您需要Function#call使用selects作爲thisArg。

[].forEach.call(selects, function (/* ... */)) 

function calculate() { 
 
    var calculationSpan = document.getElementById("calculationSpan"), 
 
     add = 0, 
 
     selects = document.querySelectorAll(".rooms"); 
 

 
    [].forEach.call(selects, function (select) { 
 
     var roomsOfType = +select.options[select.selectedIndex].value; 
 
     if (roomsOfType) { 
 
      add += roomsOfType; 
 
     } 
 
    }); 
 
    calculationSpan.innerHTML = add; 
 
}

<select class="rooms"><option value="0">0</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select> 
 
<select class="rooms"><option value="0">0</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option><option value="6">Six</option></select> 
 
<select class="rooms"><option value="0">0</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option></select> 
 
<button onclick="calculate()">Calculate</button> 
 
<span id="calculationSpan"></span>