so this is noobie .. but i am trying to complete a challenge with more due diligence than just downloading the answer, my current html code is: my javascript codes : essentially, the current code is running the event listener for the first and last item of the array only, trying to add it to all 6 but am stuck

How to add an event listener to all items in array

so this is noobie .. but i am trying to complete a challenge with more due diligence than just downloading the answer,

my current html code is:

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>
      <meta charset="utf-8">
      <title>Drum Kit</title>
      <link rel="stylesheet" href="styles.css">
      <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
    </head>
    
    <body>
    
      <h1 id="title">Drum 🥁 Kit</h1>
      <div class="set">
        <button class="w drum">w</button>
        <button class="a drum">a</button>
        <button class="s drum">s</button>
        <button class="d drum">d</button>
        <button class="j drum">j</button>
        <button class="k drum">k</button>
        <button class="l drum">l</button>
      </div>
    
    
      <footer>
        Made with ❤️ in London.
      </footer>
      <script src="index.js" charset="utf-8"></script>
    </body>

JavaScript
​x
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
​
    <head>
      <meta charset="utf-8">
      <title>Drum Kit</title>
      <link rel="stylesheet" href="styles.css">
      <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
    </head>
    
    <body>
    
      <h1 id="title">Drum 🥁 Kit</h1>
      <div class="set">
        <button class="w drum">w</button>
        <button class="a drum">a</button>
        <button class="s drum">s</button>
        <button class="d drum">d</button>
        <button class="j drum">j</button>
        <button class="k drum">k</button>
        <button class="l drum">l</button>
      </div>
    
    
      <footer>
        Made with ❤️ in London.
      </footer>
      <script src="index.js" charset="utf-8"></script>
    </body>
​

my javascript codes :

   document.querySelector("button").addEventListener("click", handleClick);
    function handleClick() {
        alert("I got clicked!");
    }
    
    
    document.querySelectorAll(".drum")[1, 2, 3, 4, 5, 6].addEventListener("click", handleClick);

JavaScript
 
   document.querySelector("button").addEventListener("click", handleClick);
    function handleClick() {
        alert("I got clicked!");
    }
    
    
    document.querySelectorAll(".drum")[1, 2, 3, 4, 5, 6].addEventListener("click", handleClick);
​

essentially, the current code is running the event listener for the first and last item of the array only, trying to add it to all 6 but am stuck

thanks to all

Answer

Instead of attaching listeners to each button, add one to the container (set) and, using event delegation, let that listener capture all the events that “bubble up” the DOM from its child elements, and call a function.

const set = document.querySelector('.set');
set.addEventListener('click', handleClick, false);

function handleClick(e) {  
  if (e.target.matches('button')) {
    const { textContent } = e.target;
    console.log(`Banging the ${textContent} drum!`);
  }
}

JavaScript
 
const set = document.querySelector('.set');
set.addEventListener('click', handleClick, false);
​
function handleClick(e) {  
  if (e.target.matches('button')) {
    const { textContent } = e.target;
    console.log(`Banging the ${textContent} drum!`);
  }
}

<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
  <button class="w drum">w</button>
  <button class="a drum">a</button>
  <button class="s drum">s</button>
  <button class="d drum">d</button>
  <button class="j drum">j</button>
  <button class="k drum">k</button>
  <button class="l drum">l</button>
</div>
<footer>
  Made with ❤️ in London.
</footer>

JavaScript
 
<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
  <button class="w drum">w</button>
  <button class="a drum">a</button>
  <button class="s drum">s</button>
  <button class="d drum">d</button>
  <button class="j drum">j</button>
  <button class="k drum">k</button>
  <button class="l drum">l</button>
</div>
<footer>
  Made with ❤️ in London.
</footer>

Additional documentation

Destructuring assignment

Advertisement

Answer