Breaking News: Grepper is joining You.com. Read the official announcement!

add click event to all elements JavaScript

Jeremy L answered on October 2, 2022 Popularity 10/10 Helpfulness 4/10

answer add click event to all elements JavaScript

add click event to all elements JavaScript

Comment

//HTML
 <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>

    <script src="index.js"></script>
  </body>

//JavaScript
//number of elements with class of drum
var numOfDrumButtons = document.querySelectorAll('.drum').length;
//assigning the buttons to an array called drums
var drums = document.querySelectorAll('.drum');
//using a for loop to iterate through each arrayed element
for (var i = 0; i < numOfDrumButtons; i++) {
  //each array indexed and assigned an anonymous function with alert
  drums[i].addEventListener('click', function () {
    alert('I got clicked');//for testing
    //add actions to occur upon click hear
  });
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: add click elements events items javascript

Link to this answer
Share Copy Link

Contributed on Oct 02 2022

Jeremy L

0 Answers Avg Quality 2/10

add click event to all elements JavaScript

Contents

More Related Answers

add click event to all elements JavaScript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.