How to include multiple css selector inside document.querySelectorAll

August 11, 2022

I’m trying to hide multiple elements with a very small js code. It works fine if I include only one class, but when I include more than one class then it no longer works. Specifically, only the first selector inserted is always hidden. Can anyone tell me what I’m doing wrong? I appreciate any help, thanks for any replies.

This is what’s working for me

window.onload = function() {
  if (window.location.href.includes('?lost_pass=1')) {
    //Hide the element.
   document.querySelectorAll('.hide_login_title')[0].style.display = 'none';
   document.querySelectorAll('.hide_login_msg')[0].style.display = 'none';
  }
};

This is what I am trying to do

window.onload = function() {
  if (window.location.href.includes('?lost_pass=1')) {
    //Hide the element.
   document.querySelectorAll('.hide_login_title, .hide_login_msg')[0].style.display = 'none';
  }
};

>Solution :

Looks like you need loop through elements that querySelectorAll is returning. There are a couple options for how you could do this, one is the nodelist’s built-in .forEach() method. It would look like this:

window.onload = function() {
  if (window.location.href.includes('?lost_pass=1')) {
    //Hide the element.
   document.querySelectorAll('.hide_login_title, .hide_login_msg')
       .forEach((element) => element.style.display = 'none');
  }
};