Adding values from select dropdown with javascript

Question

I am creating a form that has select inputs and the values add up to a certain score. I can't get the values from the select to add and the sum into the total input to show the score of their test.

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="">

In addition to everything else, you should change your for loop increment from ++i to i++ — Cᴏʀʏ
– Cᴏʀʏ, Commented Apr 30, 2015 at 18:29

Cᴏʀʏ · Accepted Answer · 2015-04-30 18:40:42Z

There are some errors in your logic. Below is a working copy, but first a few notes:

You've got ColdFusion HTML here or something, HTML does not by itself know was a <cfselect> or <cfinput> is, so this example shows valid HTML.
You're not calling your function anywhere. Make sure you do!

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="">

BReal14 · Accepted Answer · 2015-04-30 20:08:45Z

1

With selects, you need to use the value of the option that is selected especially if you plan to serve older browsers.

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

And, as another answer points out, parseInt should have a radix.

 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;
}

edited Apr 30, 2015 at 20:08

answered Apr 30, 2015 at 18:23

BReal14

1,5841 gold badge13 silver badges35 bronze badges

3 Comments

bWF800 Over a year ago

This solution worked. I had no idea select values were handled differently, thanks.

Cᴏʀʏ Over a year ago

In modern browsers, the value on a select list itself will reflect the selected option's value.

BReal14 Over a year ago

Agreed, it's on paper that .value works in ie7+, but I've found it to be unreliable even in modern browsers. a few more keystrokes ensures it works. The MDN states that it will work with .value, but in the example given, also uses the selectedIndex method: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

Abraham Adam · Accepted Answer · 2015-04-30 18:23:58Z

0

try

 parseInt( number, 10)

parseInt needs a radix

answered Apr 30, 2015 at 18:23

Abraham Adam

6331 gold badge6 silver badges16 bronze badges

Comments

Srikanth P · Accepted Answer · 2015-04-30 18:37:51Z

Here it is not clear when you want the function to be executed. Add a button to the dom and attach an event to it.

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" />

Here is the working example https://jsfiddle.net/u3sj6euy/

Collectives™ on Stack Overflow

Adding values from select dropdown with javascript

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related