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

so final piece of code, need add form values , show running total in textbox underneath 'table'. there way using javascript can done? have drop down boxes values in them.

this snippet of code:

function erasetext() {     var out = document.queryselectorall(".out");     (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>"); 

you'd want bind onchange event of each select, , recalculate sum each time.

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 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    <span id="output"></span>  </p>