CODEWITHSUNDEEP
javascript
jules2x
jules2x

Reputation: 73

Access nesting elements

I use multiple buttons with a common class. When the user clicks on any of the buttons, I want to make elements with another class fill in red.

So basically I want to color everything inside .wrapper that has the .col class.

This is what I have so far.

var clickMe = document.querySelectorAll('.common');
for (var i = 0; i < clickMe.length; i++) {
  clickMe[i].addEventListener('click', function (event) {

    var x = document.querySelectorAll('#wrapper svg .col'); //this is where my issue starts.
    x.style.fill = "red";

  }, false);
}

Looking for a pure javascript solution.

Upvotes: 0

Views: 35

Answers (1)

Deepak
Deepak

Reputation: 870

Something like following should work for you:

var clickMe = document.querySelectorAll('.common');
for (var i = 0; i < clickMe.length; i++) {
  clickMe[i].addEventListener('click', function (event) {

    var x = document.querySelectorAll('#wrapper svg .col'); //this is where my issue starts.
    for(var j=0;j<x.length;j++){
      x[j].style.fill = "red";
    }


  }, false);
}

Upvotes: 1

Related Questions