1

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';
  }
};
Snorlax
  • 183
  • 4
  • 27
  • Does this answer your question? [How to get elements with multiple classes](https://stackoverflow.com/questions/7184562/how-to-get-elements-with-multiple-classes) – devlin carnate Aug 11 '22 at 17:03

1 Answers1

3

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');
  }
};
WillD
  • 5,170
  • 6
  • 27
  • 56
  • Your solution works, thank you very much. I had already tried this solution and it was not working, evidently I was doing something wrong. Anyway that's okay. – Snorlax Aug 11 '22 at 17:06