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';
}
};
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');
}
};