使用 JavaScript 添加 HTML 表单以在文本框中获取总数

Question

因此对于我的最后一段代码，我需要将所有表单值相加并在 'table' 下方的文本框中显示总计运行。有没有办法使用 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

您希望绑定到每个 select 的 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>

使用 JavaScript 添加 HTML 表单以在文本框中获取总数

Adding HTML form using JavaScript to get a total in text box

javascript

html

dropdown