TypeError: {variable}.style is undefined

Asked Jan 01 '20 at 13:12

Active Jan 01 '20 at 13:17

Viewed 186 times

I have created a html and javascript solution to create a toggle list.

HTML is like this:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = document.getElementsByClassName("content");
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

<button class="collapsible" type="button">tryout</button>
<div class="content">lorem ipum...</div>

I get a notice in the console: "TypeError: content.style is undefined".

I have tried a lot but cannot figure out what i am doing wrong here...

edited Jan 01 '20 at 13:15

adiga

34,372
9
61
83

asked Jan 01 '20 at 13:12

Webdever

1

`getElementsByClassName` returns a collection – adiga Jan 01 '20 at 13:14
You probably should iterate through `content` – half of a glazier Jan 01 '20 at 13:14
1

or change to `var content = document.getElementsByClassName("content")[0];` – Addis Jan 01 '20 at 13:15
1

@Addis you were right, adding [0] solves the problem! – Webdever Jan 01 '20 at 19:43

TypeError: {variable}.style is undefined

0 Answers0