CODEWITHSUNDEEP
javascriptclasseventsnodelist
pjk_ok
pjk_ok

Reputation: 947

Clicking On Multiple Instances of the Same Class not Working

I have a menu button that appears multiple times on a site that i've put a click event on.

When I click on the button nothing happens (when there was just one instance of the button it worked fine). I know I need to loop through the node list created by having multiple instances of a class, but when I click on the button now, nothing happens and I don't get an error in the console either to give me any pointers?

Javascript and a simplified illustration in a Codepen are below.

Codepen: https://codepen.io/emilychews/pen/owWVGz

JS

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');
var $mainMenuButtonAll = function () { 
    for(h = 0; h < $mainMenuButton.length; h+=1) {
      $mainMenuButton[i];
    }
};

$mainMenuButtonAll.onclick = function () {

  $mainMenuButtonAll.style.background = "black";

};

Any help would be awesome.

Emily

Upvotes: 0

Views: 789

Answers (4)

Komninos
Komninos

Reputation: 424

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');
for(var h = 0; h < $mainMenuButton.length; h++) {
   $mainMenuButton[h].addEventListener('click', function() {
      this.style.background = "black";
   });
}

Here is a working example.

What I did:

  1. Removed the $mainMenuButtonAll variable since it was not needed.

  2. Made the h variable on the for loop local, instead of global(more on that here)

  3. Added an event listener to each $mainMenuButton, since it's never good to overwrite the onclick event.

Upvotes: 1

Prabodh M
Prabodh M

Reputation: 2252

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');

var $mainMenuButtonAll = function () { 
    for(h = 0; h < $mainMenuButton.length; h+=1) {
      $mainMenuButton[h].addEventListener("click", function(){
        this.style.background = 'black';
      });
    }
};


$mainMenuButtonAll();

You need to bind each and every occurence of the button with an event click to perform some action over it.

Upvotes: 1

gauravmuk
gauravmuk

Reputation: 1616

var $el = document.getElementsByClassName('desktopmenubutton');

// Solution 1
for (var i = 0; i < $el.length; i++) {
    // If on clicking any element, only that should change
    $el[i].onclick = function () {
        this.style.background = 'black';
    }
}

// Solution 2
for (var i = 0; i < $el.length; i++) {
    // If on clicking any element, all should change
    $el[i].onclick = function () {
        for (var j = 0; j < $el.length; j++) {
            $el[j].style.background = 'black'
        }
    }
}

First, we get all the elements and bind seperate click handlers for all the elements seperately. Solution 1 when you want to change only the element clicked and solution 2 when you want all the elements to change.

Upvotes: 1

Kokodoko
Kokodoko

Reputation: 28128

I edited the code for you, check the comments and the jsFiddle.

// get all the buttons with this tag name (or use class name)
var allButtons = document.getElementsByTagName('desktopmenubutton');

// add a click listener to each button
for(h = 0; h < allButtons.length; h+=1) {
    allButtons[h].addEventListener("click", function(e){
         console.log("yo yo");
           e.currentTarget.style.backgroundColor = "black";
    })
}

Upvotes: 1

Related Questions