No errors but JavaScript still doesn't work

Question

When the user clicks on the like button I want to show a notification above "Mijn verhalen" to let the user know it liked a certain thing. I don't know what's wrong because there are no errors in my JavaScript. But the notification doesn't show up...

This is the JavaScript code:

var een =
  document.getElementsByClassName('like');

var popup =
  document.getElementsByClassName('toevoegen');

een.addEventListener('click', function() {
  popup.classList.toggle('toevoegen');
});

img.toevoegen {
  position: absolute;
  right: 5em;
  top: 4em;
  width: 10em;
}

<button class="like"></button>

<img class="toevoegen" src="images/een.png">

`getElementsByClassName()` returns a **list** of elements, not just one. — Pointy, Oct 28 '19 at 16:51
[Same issue](https://stackoverflow.com/questions/32027935/addeventlistener-is-not-a-function-why-does-this-error-occur) and [this answer](https://stackoverflow.com/a/32027956/3316645) will work for you as well. — domsson, Oct 28 '19 at 16:52

score 0 · Answer 1 · answered Oct 28 '19 at 17:00

var popup = document.getElementsByClassName('toevoegen');

document.getElementsByClassName returns HTMLCollection which is nothing but array. classList is not a known property of HTMLCollection.

You need to get the first element of this HTML collection and use the classList property. First element is nothing but the popup element.

Or else provide ID to the img tag and access it using document.getElementById which returns a DOM element not an HTML array collection.

var een =
  document.getElementsByClassName('like');

// get the first pop up element here
var popup =
  document.getElementsByClassName('toevoegen')[0];

een.addEventListener('click', function() {
  popup.classList.toggle('toevoegen');
});

No errors but JavaScript still doesn't work

1 Answers1