使用javascript从选择下拉列表中添加值

Question

我正在创建一个具有选择输入且值合计达到某个分数的表单。我无法从select中添加值并将其添加到总输入中以显示其测试的得分。

的JScript：

function calculate_total(){ 
     var elems = document.getElementsByClassName('Assessment'); 
     var myLength = elems.length, 
     total = 0; 

     for (var i = 0; i < myLength; ++i) { 
      total += parseInt(elems[i].value * 1); 
     } 
     document.getElementById('ScoreTot').value = total; 

} 

HTML：

<cfselect name="SELECT1" id="select1" class="Assessment"> 
    <option value="0"> OPTION 1 </option> 
    <option value="1"> OPTION 2 </option> 
</cfselect> 

<cfselect name="select2" id="select2" class="Assessment"> 
    <option value="0"> OPTION 1 </option> 
    <option value="1"> OPTION 2 </option> 
    <option value="2"> OPTION 3 </option> 
</cfselect> 

<cfselect name="select3" id="select3" class="Assessment"> 
    <option value="0"> OPTION 1 </option> 
    <option value="1"> OPTION 2 </option> 
    <option value="2"> OPTION 3 </option> 
</cfselect> 

Score: <cfinput type="text" name="ScoreTot" id="ScoreTot" value=""> 

Answer 1

有了选择，您需要使用选择，特别是如果你打算成为旧的浏览器选项的值。

elems[i].options[elems[i].selectedIndex].value

而且，作为另一个答案指出，parseInt函数应该有一个基数。

function calculate_total(){ 
    var elems = document.getElementsByClassName('Assessment'); 
    var myLength = elems.length, 
    total = 0; 

    for (var i = 0; i < myLength; ++i) { 
     total += parseInt(elems[i].options[elems[i].selectedIndex].value * 1,10); 
    } 
    document.getElementById('ScoreTot').value = total; 
} 

Answer 2

尝试

parseInt(number, 10) 

parseInt函数需要一个基数

Answer 3

有你的逻辑一些错误。下面是一个工作拷贝，但是第一几点注意事项：

1. 你有ColdFusion的HTML这里什么的，HTML本身并不知道是一个<cfselect>或<cfinput>是，所以这个例子显示有效的HTML。
2. 你不会在任何地方调用你的函数。确保你做到了！

function calculate_total() { 
 
    var els = document.getElementsByClassName('Assessment'); 
 
    // always use var to declare variables in scope; they are global otherwise 
 
    var total1 = 0; 
 

 
    // Little benefit to storing the length elsewhere 
 
    // Use i++ instead of ++i 
 
    for (var i = 0; i < els.length; i++) { 
 
     // Use a radix to indicate base 10, I didn't see a need for the *1 
 
     total1 += parseInt(els[i].value, 10); 
 
    } 
 
    document.getElementById('ScoreTot').value = total1; 
 

 
} 
 

 
// Call your function somehow! 
 
calculate_total();

<select name="SELECT1" id="select1" class="Assessment"> 
 
    <option value="0">OPTION 1</option> 
 
    <option value="1" selected>OPTION 2</option> 
 
</select> 
 
<select name="select2" id="select2" class="Assessment"> 
 
    <option value="0">OPTION 1</option> 
 
    <option value="1">OPTION 2</option> 
 
    <option value="2" selected>OPTION 3</option> 
 
</select> 
 
<select name="select3" id="select3" class="Assessment"> 
 
    <option value="0">OPTION 1</option> 
 
    <option value="1">OPTION 2</option> 
 
    <option value="2" selected>OPTION 3</option> 
 
</select>Score: 
 
<input type="text" name="ScoreTot" id="ScoreTot" value="">

Answer 4

这里的时候，你要执行的功能尚不清楚。 向dom添加一个按钮并为其添加一个事件。

var e = document.getElementById('foo'); 
 
e.onclick = calculateTotal; 
 

 
function calculateTotal(){ 
 
    
 
     var elems = document.getElementsByClassName('Assessment'); 
 
     var myLength = elems.length, 
 
     total = 0; 
 
     for (var i = 0; i < myLength; ++i) { 
 
      total += parseInt(elems[i].value * 1); 
 
     } 
 
     document.getElementById('ScoreTot').value = total; 
 

 
}

<select name="SELECT1" id="select1" class="Assessment"> 
 
    <option value="0"> OPTION 1 </option> 
 
    <option value="1"> OPTION 2 </option> 
 
</select> 
 

 
<select name="select2" id="select2" class="Assessment"> 
 
    <option value="0"> OPTION 1 </option> 
 
    <option value="1"> OPTION 2 </option> 
 
    <option value="2"> OPTION 3 </option> 
 
</select> 
 

 
<select name="select3" id="select3" class="Assessment"> 
 
    <option value="0"> OPTION 1 </option> 
 
    <option value="1"> OPTION 2 </option> 
 
    <option value="2"> OPTION 3 </option> 
 
</select> 
 

 
Score: <input type="text" name="ScoreTot" id="ScoreTot" value=""> 
 

 
<input type="button" id="foo" value="Add" />

这里是工作示例 https://jsfiddle.net/u3sj6euy/