Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

add click event to multiple items JavaScript

//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
  });
}
 
PREVIOUS NEXT
Tagged: #add #click #event #multiple #items #JavaScript
ADD COMMENT
Topic
Name
1+1 =