GetElementsByClassName Not Working As Expected

Question

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 value has been selected in one of the first ones, or vice versa.

Typical code for one of the dropdown boxes is

<select onchange="std()" class="numrooms" name="numrooms[4]">
<option value="" selected>Select</option>
<option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</option>
<option value="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</option>
</select>

I am using the following javascript:

function std() {
d = document.getElementsByClassNames("numrooms").value;
if (d>0) {
    document.getElementsByClassNames('numrooms_nr').disabled = true;
}else{
    document.getElementsByClassNames('numrooms_nr').disabled = false;
}
}
function nr() {
e = document.getElementsByClassNames("numrooms_nr").value;
if (e>0) {
    document.getElementsByClassNames('numrooms').disabled = true;
}else{
    document.getElementsByClassNames('numrooms').disabled = false;
}
}

but it doesn't work.

I have tried changing the classes to IDs and then using GetElementById() in the script and that does work, but of course it only works on one pair of dropdowns. I thought going to classes and using Get ElementsBy ClassName() would do the trick, but apparently not.

Am I missing something obvious? Or doing it completely wrong?

EDIT As everyone pointed out, I wrote "getElementsByClass" in the question when it should have been "getElementsByClassName". However that was a mistake when I wrote the question and not in my actual code. I've corrected it here now.

EDIT2 I'm getting there, but not quite fully sorted yet. I've adopted @Notulysses suggestion so for testing purpose my script is

function std() {
d = document.getElementsByClassName('numrooms')[1].value;
if (d>0) {
var n = document.getElementsByClassName('numrooms_nr')
for(var i=0;i<n.length;i++){
   n[i].disabled = true;
}
}else{
var n = document.getElementsByClassName('numrooms_nr')
for(var i=0;i<n.length;i++){
   n[i].disabled = false;
}
}
}
function nr() {
e = document.getElementsByClassName('numrooms_nr')[0].value;
if (e>0) {
var n = document.getElementsByClassName('numrooms')
for(var i=0;i<n.length;i++){
   n[i].disabled = true;
}
}else{
var n = document.getElementsByClassName('numrooms')
for(var i=0;i<n.length;i++){
   n[i].disabled = false;
}
}
}

function(std) now disables all of the second dropdown boxes when the first dropdown in the second room is selected (because I have set it to 1). Similarly function(nr) disables all of the first dropdown boxes (because I have set it to [0]). But how do I disable all the second dropdowns when any of the first dropdowns is selected?

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

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

Answer 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

Answer 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.