Trying to toggle a class but I get error 'toggle' of undefined using Javascript

Question

I'm trying to get my class to toggle but it won't work. I get an error message saying "Uncaught TypeError: Cannot read property 'toggle' of undefined".

This is my Javascript:

var sound = document.getElementById("sound");
var two = document.getElementsByClassName("two");
var twoanimated = document.getElementsByClassName("twoanimated");

function animatie () {
    two.classList.toggle("twoanimated");
}

sound.addEventListener("click", animatie);

What am I doing wrong?

@AndrewLi That might explain why, but this is not a duplicate. — Praveen Kumar Purushothaman, Jul 10 '17 at 22:03
@AndrewLi Tell me if I should hammer now. If you feel so, I'll do it. — Praveen Kumar Purushothaman, Jul 10 '17 at 22:03
Duplicate or not, it was exacly what I needed to know, so thank for the quick reply. Sorry if Im stupid for asking a question that has already been asked, I did look for it but couldn't find it. — H0ndman2, Jul 10 '17 at 22:21
@H0ndman2 You want me to undelete my answer so you can copy it, and let me know? — Praveen Kumar Purushothaman, Jul 10 '17 at 22:31

score 1 · Accepted Answer · answered Jul 10 '17 at 22:01

The reason is here:

var two = document.getElementsByClassName("two");

The two is a HTMLCollection and not a single element. So you need to do:

two[0].classList.toggle("twoanimated");

The above code works if there's only one single element for the class name twoanimated. If there are multiple, please use a counter loop something like this:

function animatie () {
  for (var i = 0; i < two.length; i++) {
    two[i].classList.toggle("twoanimated");
  }
}

Trying to toggle a class but I get error 'toggle' of undefined using Javascript

1 Answers1