Neede help with: document.getElementsByClassName('').addEventListener

JavaScript
#1

Hello,
I’m working on the drum machine
and trying to solve such issue

when I press keyboard key it work perfectly (code below)
but also I want to add event when I click on button
and there is my issue

drum
drum2736×1816 202 KB

console:

> index.html:66 Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
>     at index.html:66
> (anonymous) @ index.html:66

maybe anybody could suggest me what is wrong?

<script>
//function press keyboard
    window.addEventListener('keydown', function (e) {
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
      if (!audio) return;
      audio.currentTime = 0;
      console.log(e);
      audio.play();
    });
//function click button
    document.getElementsByClassName('btn').addEventListener('click', function (e) {
      console.log(e);
    });
  </script>

Sorry if my english isn’t well and I didn’t cleary explain my problem :slight_smile:

#2

The getElementsByClassName() method returns a collection of all elements in the document as a NodeList object.

addEventListener() adds a Listener to one element,

You have to find a method that adds the Listener for each of the elements

1 Like
#3