Cannot read property of undefined when using getElementsByClassName

Question

I have a rather odd issue that I can't seem to solve. I have written a code and I want to use it when a certain element has this specific class name, so I have done this:

function slide() {
    var box = document.getElementsByClassName('box'); 
    if(box.style.maxHeight !== "100px") {
        box.style.maxHeight = "100px";
        box.style.opacity = "1";
    } else {
        box.style.maxHeight = "0";
        box.style.opacity = "0";
    }
    return false;
}

And the HTML:

<h1 onclick="slide();"> Text </h1>

<div class="box">
    <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
    </p>
</div>

And the CSS:

.box {
    max-height: 0;
  }

I think I am missing something here, but I don't know what. The funny thing is: when I would use getElementById, it works! But I want to use classnames instead and that is not working.

The error I am getting is:

Uncaught TypeError: Cannot read property 'maxHeight' of undefined

Oh dear me! Wow, that simple? Could you please write it down as an answer and explain to me what it does to be precise? It works, but I want to know why I need to do that? — Siyah, Jan 08 '17 at 14:36
byID returns 1, byClass returns many. choose one of the answers offered ;) — dandavis, Jan 08 '17 at 14:37

Jonas Wilms · Accepted Answer · 2017-01-08T14:39:46.687

2

Get Elements By ClassName returns a HTML Collection. You need to assign it on each elem:

var boxes = document.getElementsByClassName('box'); 
for(box of boxes){
 //work with elem
 if(box.style.maxHeight !== "100px") {
   box.style.maxHeight = "100px";      
   box.style.opacity = "1";
 } else { 
   box.style.maxHeight = "0";     
   box.style.opacity = "0";
}
}

edited Jan 08 '17 at 14:39

answered Jan 08 '17 at 14:36

Jonas Wilms

132,000
20
149
151

Could you give it as an example, using my snippet? Don't get what you mean – Siyah Jan 08 '17 at 14:39
Edited, now contains working code... – Jonas Wilms Jan 08 '17 at 14:42
Fantastic, thank you very much! – Siyah Jan 08 '17 at 14:44
First time I see a `for...of` on a HTMLCollection. Is their [Symbol.iterator] standard? Unlike NodeList, the spec doesn't say they are iterable. – Oriol Jan 08 '17 at 14:46
@Oriol dont know... – Jonas Wilms Jan 08 '17 at 14:47

score 0 · Answer 2 · answered Jan 08 '17 at 14:36

0

   var box = document.getElementsByClassName('box')[0];

answered Jan 08 '17 at 14:36

Vladu Ionut

8,075
1
19
30

Please don't forget to explain / comment your code, and provide relevant documentation [from review] – Blag Jan 08 '17 at 15:20

score -1 · Answer 3 · answered Jan 08 '17 at 14:35

-1

the getElementsByClassName return an array. Its items have the style property, not the array itself.

answered Jan 08 '17 at 14:35

ValLeNain

2,232
1
18
37

Cannot read property of undefined when using getElementsByClassName

3 Answers3