異なる選択からオプションの値を計算する方法

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; 

そしてselectsは、オブジェクトのような配列ではなく配列であるので、あなたは、Array#forEachを借りる必要があります。

selectsをthisArgとして使用するには、Function#callが必要です。

[].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>