getElementByID works, getElementsByClassName does not work

Question

I'm working on a solution where the javascript changes div1 instead of div2. This code works with getElementbyId but does not work with getElementbyClassName. Why does this not work?

function refer(Div1, Div2) {
    if (document.getElementByClassName('Div1')) {
        if (document.getElementByClassName('Div1').style.display == 'block') {
            var elems = document.getElementsByClassName('Div2');
            for(var i = 0; i < elems.length; i++) { 
                elems[i].style.display = 'block';
            }

            var elem = document.getElementsByClassName('Div1');
            for(var i = 0; i < elem.length; i++) {
                elem[i].style.display = 'none';
            }
        }
    }
}

The first 2 methods are misspelt. `document.getElement`s`ByClassName` they need an `s` — zer00ne, Feb 15 '16 at 01:40
There is no getElementByClassName method and when you add the "s" you can not just reference the collection to get the one element. — epascarello, Feb 15 '16 at 02:07
document.getElementByClassName('Div1').style.display == 'block' ¿If exist any element with class Div1? — Maxi Schvindt, Feb 15 '16 at 02:12
@AlvaroJoao—w3schools is not an authority on anything, please don't reference it. Far better to reference actual standards or specifications, e.g. [*WHATWG*](https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname) or [*W3C*](https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyname). And there is no *getElementByClassName*, check the spelling. ;-) — RobG, Feb 15 '16 at 02:32
There is a question with almost the exact the same title as yours. Didn't you find that one? — Felix Kling, Feb 15 '16 at 02:34
@RobG Thanks for the tips and the reference! I will follow them starting today! — Alvaro Silvino, Feb 15 '16 at 02:34
@AlvaroJoao I am glad Google fixed the spelling mistake so you got the correct method. — epascarello, Feb 15 '16 at 02:34
I am posting a fiddle of mine for the reference. [https://jsfiddle.net/60g80qad/ — Vignesh Raghupathy, Feb 16 '16 at 02:53

DDan · Answer 1 · 2016-02-15T02:25:25.143

0

Here is an example how to use getElementsByClassName: Fiddle

Is this working for you?

array = document.getElementsByClassName('div1');
for (i = 0; i < array.length; i++) {
    array[i].style.backgroundColor = "red";
}

In Chrome and Edge works with no issue.

edited Feb 15 '16 at 02:25

answered Feb 15 '16 at 02:19

DDan

8,068
5
33
52

Alvaro Silvino · Answer 2 · 2016-02-15T02:42:22.460

You are using a array as an object, the difference between getElementbyId and getElementsByClassName is that:

getElementbyId will return you an object.
getElementsByClassName will return you an array.

getElementsByClassName

The getElementsByClassName(classNames) method takes a string that contains an unordered set of unique space-separated tokens representing classes. When called, the method must return a live NodeList object containing all the elements in the document that have all the classes specified in that argument, having obtained the classes by splitting a string on spaces. If there are no tokens specified in the argument, then the method must return an empty NodeList.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

The getElementById() method accesses the first element with the specified id.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

in your code the lines:

1 if (document.getElementByClassName('Div1')) {

2 if (document.getElementByClassName('Div1').style.display == 'block') {

will NOT work as expected: specially the second(2) line,
cos the getElementByClassName will return an array, and the array will NOT have the style property, you gonna access each element by iterating them.

That's why the function getElementById was working for you, this function will return you the direct object , and so you will be able to access the style property.

One working code:

function refer(Div1,Div2) {

           var elem = document.getElementsByClassName('Div1');
            var elems = document.getElementsByClassName('Div2');
            for(var i = 0; i < elem.length; i++) {

                if (elem[i]) {
                   if (elem[i].style.display == 'block') {

                       elem[i].style.display = 'none';

                       for(var i = 0; i < elems.length; i++) { 
                           elems[i].style.display = 'block';
                       }
                   }
               }
           }
}

getElementByID works, getElementsByClassName does not work

2 Answers2

getElementsByClassName

getElementById