CODEWITHSUNDEEP
javascript
dawid-zukowski
dawid-zukowski

Reputation: 61

querySelectorAll not working in my script

i have problem with querySelectorAll.

This is my code:

$(window).load(
    function() {

        // Add animations
        var wwa = document.querySelectorAll(".wwa-box");

        if (window.innerWidth > 992) {
            wwa.classList.add("bounceIn");
        }

        // WOW init
        new WOW().init();

    }
);

Console:

TypeError: wwa.classList is undefined

I want to add class .bonuceIn to all tags with class .wwa-box.

Upvotes: 0

Views: 313

Answers (4)

epascarello
epascarello

Reputation: 207501

because it is a nodeList collection and you treat it as a single item. You need to loop though them all and set the classList.

var wwa = document.querySelectorAll(".wwa-box");
for (var i=0; i<wwa.length; i++) {
     wwa[i].classList.add("bounceIn");
}

Upvotes: 1

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

It is because wwa is a collection. You can use a simple loop to iterate it and add the class. See this jsfiddle

  for (i = 0; i < wwa.length; i++){
     wwa[i].classList.add("bounceIn");
  }

Upvotes: 1

Viktor Kukurba
Viktor Kukurba

Reputation: 1370

The problem is cause wwa is NodeList, if there is only one element with class wwa-box you can use document.querySelector(".wwa-box"); it returns only first element, or use foreach if you have few .wwa-box.

Upvotes: 1

Angelo Simonato
Angelo Simonato

Reputation: 1

As said by the console:

TypeError: wwa.classList is undefined

Is this property really with wwa? Shouldn't you put a debbuger and navigate and see the properties that it have?

Using the other answer, see the index after and use a for to navigate and add the class.

Upvotes: -1

Related Questions