How to implement a 'toggle class' function in vanilla JavaScript?

Question

This function should search the document for any element with a 'data-info' attribute with a value of 'graphicDesign' then toggle the class 'hideMe' on those elements.

It returns the correct amount of elements in the console, but breaks on the classList toggle.

I've tried alternatives such as finding elements by class name then toggling, but this doesn't work either.

function toggleGraphicDesign() {
    let graphicDesignElements = document.querySelectorAll('[data-info="graphicDesign"]');
    console.log(graphicDesignElements.length);

    graphicDesignElements.classList.toggle('hideMe');

}

Maheer Ali · Accepted Answer · 2019-05-17 11:27:11Z

6

querySelectorAll() return a NodeList not a single element.According to MDN

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

You need to loop through all the elements using forEach() and toggle class of each element.

function toggleGraphicDesign() {
    let graphicDesignElements = document.querySelectorAll('[data-info="graphicDesign"]');
    console.log(graphicDesignElements.length);
    graphicDesignElements.forEach(x => x.classList.toggle('hideMe')) 
}

answered May 17, 2019 at 11:27

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement a 'toggle class' function in vanilla JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related