Using a filter to apply class to many elements, Javascript

1

Hi everyone, i am experimenting with array method in JS and I’ve run in to an issue.

let wholePage =  !document.includes('popup');


const hideAll = () => {
  wholePage.classList.addClass('hidden')
};

What I want to do is find everything that does not have the class of ‘popup’ and when the button is clicked I want that all to have a hidden class applied to it. However nothing is happening when I click the button, so I must be wrong somewhere.

<button type="button" id="button1" onclick="hideAll()" class="popupbutton btn btn-info navbutton">Projects</button>

The button, just in case that was the issue.

Thank you all in advance for your help.

2

I would rather go with something like this:

function addClassTo(searchQuery, className) {
  // Select all elements with specific query, '.class' for classes, '#id' for ids, '[attr="value]' for attributes
  const elements = document.querySelectorAll(searchQuery);
  // Add class for each of the element
  elements.forEach(element => element.classList.addClass(className);
}
2 Likes
3

In addition to (EDIT: the post above - the forum automatically removed my quote), you can make use of the :not() pseudo-class in your searchQuery.

let searchQuery = ':not(.popup)';
let className = 'hidden';
addClassTo(searchQuery, className)

However, that’s a massively broad selector if your page has a decent number of elements, and it would likely be a good idea to find something more specific.

1 Like
4

I think I understand your example, however I have just a few questions if you don’t mind.
What should I put for search query? I want to everything that is NOT the popup class, I tried putting ‘!.popup’ but it my syntax was wrong.

6

You’re right they did. So I put their answers together and got this.

function hideAll(searchQuery, className) {
let searchQuery = ':not(.popup)';
let className = 'hidden';
hideAll(searchQuery, className)
};

I get the error that searchQuery has already been declared.
I think I have burnt myself out. I will take another look at it in a few hours.

8

Thanks everyone here for your answers. Sorry for taking up your time. I am feeling under the weather today and I should have just taken a day off when I encountered this problem. I will have a good night’s rest then solve it myself.
Again, thanks everyone.