带选择/选项的Javascript onChange

Question

I have this javascript code:

 window.onload = function() {
                var eSelect = document.getElementByClassName('item');

                var body = document.getElementById('body');
                var face = document.getElementById('face');
                var neck = document.getElementById('neck');
                var feet = document.getElementById('feet');
                var hand = document.getElementById('hand');
                var other = document.getElementById('other');
                var pin = document.getElementById('pin');
                var color = document.getElementById('color');
                var bg = document.getElementById('bg');

                var optOtherReason = document.getElementById('myPeng');

                eSelect.onchange = function() {
                    //Do something
                }
            }

That code works if eSelect gets element by id. It won't work if it is by class name, please help me!

Answer 1

(*) getElementsByClassName()

(*) by class name you are getting a array of dom elements.

var eSelect = document.getElementsByClassName('item');
var len = eSelect.length;
for( var i=0; i<len; i++ ) {
   eSelect[i].onchange = function() {  };
}

Answer 2

May be you are using

document.getElementByClassName('yourclass');//wrong

Correct Syntex:

document.getElementsByClassName('yourclass');

More Info: "document.getElementByClass is not a function"

Note that some browsers/versions may not support this getElementsByClassName function Check Details .

If you want onchange for all Select with class:

var eSelect = document.getElementsByClassName('test');
for(var i=0;i<eSelect.length;i++)
{
eSelect[i].onchange = function(){alert("sdfdsf");}
}

Demo

Answer 3

Try:

var eSelect = document.getElementByClassName('item')[0]

The suggested getElementByClassName('item') actually gives back an array of matching elements unlike getElementById that gives the matching element directly. So the [0] in suggested code selects the first and only element in that array.