如何在JavaScript中对每个循环的选项值求和

Question

since I'm a very beginner in JavaScript I've got stuck with a short script. Here's the deal: I have a formular with 30 Options and each has the values from 1-10. Now I want to sum them up and show the result while the user is still changing the options.

function calculate() 
{
    input1 = parseFloat(document.character.input1.value);
    input2 = parseFloat(document.character.input2.value);
    input3 = parseFloat(document.character.input3.value);
    input4 = parseFloat(document.character.input4.value);
    input5 = parseFloat(document.character.input5.value);
    input6 = parseFloat(document.character.input6.value);
    input7 = and so on

    document.getElementById("output").innerHTML = (input1 + input2 + input3 + input4 + input5 + input6 ...).toString();
}

It works, but I wanted to make it way shorter with a for-loop. But whatever I try, I couldn't get it to work. Could anyone help me here?

Answer 1

You could try doing something like this:

var total = 0;
for ( var i = 1; i <= 30; i++ ){
  total += parseFloat( document.character[ "input" + i ].value );
}
document.getElementById( "output" ).innerHTML = total;

All I am doing here is using the variable i to assemble the key for the character object. The value is added (for each iteration) to the total variable which is finally placed in the #output element's content.

Answer 2

I don't understand how users can "change an option" so as to change the sum of the values of a select element's options. But anyway, you can do it like:

<select onchange="getTotal(this);">

and the function:

function getTotal(select) {
  var total = 0;
  var options = select.options;
  for (var i=0, iLen=options.length; i<iLen; i++) {
    total += +options[i].value;
  }
  document.getElementById('output').innerHTML = total;
}

if you have a multiple select and only want to sum those that are selected, then you can do:

  total += options[i].selected? +options[i].value : 0;

Be careful though, change listeners on select elements may behave a little differently in different browsers.