Getelementsbyclassname Not Working As Expected

I have a table that typically looks like this on the screen: The multiple rooms are displayed by using a foreach loop. Now I need to disable all the second dropdown boxes when a v

Solution 1:

You are using getElementsByClass (it doesn't exist) and changing property for the whole collection (not valid, you should iterate through Node list to change attribute's value). You should do something like this :

var n = document.getElementsByClassName('numrooms')
for(var i=0;i<n.length;i++){
   n[i].disabled = true;
}

Solution 2:

Its GetElementsByClassName not GetElementsByClass and it returns you NodeList of nodes so if you want to change any property you need to use indexing, i.e, looping:

document.getElementsByClassName('numrooms_nr')[0].disabled = true;

and here is your complete code:

var d = document.getElementsByClassNames("numrooms");
for(var i=d.length-1;i>=0; i--){
  if(n[i].value > 0){
    n[i].disabled = true;
  }
  else{
    n[i].disabled = false;
  }
}

Solution 3:

You are using it wrong. It's not getElementsByClass , it is getElementsByClassName. And it returns a HTMLCollection of found elements. To have an access to any element you should use indexing.

document.getElementsByClassName('someclass')[0] <- index

See the link for more details -> Link

Solution 4:

getElementsByClassName and getElementsByTagName do not return a single element, like get ElementById. Rather, they return an array containing all the elements with that class. This has tripped up many Javascripters over time. Also note that getElementsByClassName won't work in early IE versions (surprise surprise!)

As such, you are missing the bit with the [0] or [1] or the [2] etc. after getElementsByClassName is written, for example:

document.getElementsByClassName("numrooms")[0]

will refer to the first of the bunch with that class name.