使用JavaScript添加HTML表單以在文本框中獲得總計

Question

因此，對於我的代碼的最后一部分，我需要將所有表單值加在一起，並在“表”下方的文本框中顯示運行總計。 有沒有一種使用JavaScript的方法可以做到這一點？ 我的下拉框中有值。

這是我的代碼的片段：

function eraseText() {
    var out = document.querySelectorAll(".out");
    for (var i=0;i<out.length;i++) {
      out[i].value="";
    }
}

var sections = {

  p1 : {sname: "Dynamic Table   ", mscore: 20},
  p2 : {sname: "IntelliJ Usage  ", mscore: 10},
  p3 : {sname: "Calender Control", mscore: 30},
  p4 : {sname: "Active Form     ", mscore: 20},
  p5 : {sname: "Object Database ", mscore: 20}
};

document.write("<pre>");
document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') 
     + o.sname + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' 
     + o.mscore + '&nbsp;&nbsp;&nbsp;' 
     + '<textarea class="out" id="output" rows="4" cols="25"></textarea>' 
     + '&nbsp;&nbsp;&nbsp;' 
     + '<select>'
     + '<option value="1">1</option>'
     + '<option value="2">2</option>'
     + '<option value="3">3</option>'
     + '</select>' }, '')
);
document.write("</pre>");

Answer 1

像這樣嗎

var selects = [].slice.call(document.querySelectorAll('select')); // [].slice.call turns NodeList into an array
var total = selects.reduce(function (previousValue, select) {
   previousValue += select.options[select.selectedIndex].value || 0;
}, 0);
// ... then query for textbox, set the value of it to 'total'

Answer 2

您希望綁定到每個選擇的onchange事件，並每次重新計算總和。

 var output = document.getElementById('output'), selects = document.querySelectorAll('select'); //helper method function doToAll(elems, fn) { var len = elems.length; while (--len > -1) { fn(elems[len]); } } //sum values function sumSelects() { var sum = 0; doToAll(selects, function(t) { sum += parseInt(t.value); }); return sum; } //bind to onchange event doToAll(selects, function(t) { t.addEventListener('change', function() { output.textContent = sumSelects(); }); }); //run once on load window.addEventListener('load', function() { output.textContent = sumSelects(); }); 

 <select> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select> <select> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select> <select> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select> <p>The current total is <span id="output"></span> </p>