Multiple selectors like in JS like jQuery

Hi folks,
I am writing some js but want to use multiple css selectors - See my code:

My before code:

    document.querySelectorAll('.login .login-bottom').addEventListener('click',
        function () {
            console.log('login btn clicked');
            jQuery('.user_check, .forgot_password, .create_login_popup').fadeOut("fast");
            jQuery('.login_popup').fadeIn("fast");
        });
    document.querySelector('.login-bottom').addEventListener('click',
        function () {
            console.log('login Bottom btn clicked');
            jQuery('.user_check, .forgot_password, .create_login_popup').fadeOut("fast");
            jQuery('.login_popup').fadeIn("fast");
        });

Me trying this:

    document.querySelectorAll('.login, .login-bottom').addEventListener('click',
        function () {
            console.log('login btn clicked');
            jQuery('.user_check, .forgot_password, .create_login_popup').fadeOut("fast");
            jQuery('.login_popup').fadeIn("fast");
        });

Can you do this? Cheers :slight_smile:

I’ve tried this too:

const getLoginBtns = document.querySelectorAll('.login');
    for (const getLoginBtn of getLoginBtns) {
        getLoginBtns.addEventListener('click', function (event) {
            console.log('login btn clicked');
            jQuery('.user_check, .forgot_password, .create_login_popup').fadeOut("fast");
            jQuery('.login_popup').fadeIn("fast");
        })
    }

but it shows this error:

What am I doing wrong?

Solved:

    const getSignUpBtn = document.querySelectorAll('.create_login');
    Array.from(getSignUpBtn).forEach(click => {
        click.addEventListener('click', function (event) {
            console.log('signUpbtn clicked');
            jQuery('.user_check, .forgot_password, .login_popup').fadeOut("fast");
            jQuery('.create_login_popup').fadeIn("fast");
        });
    });

querySelectorAll creates a NodeList and instead of a single element like querySelector would create. You would need to add the addEventListener method to each Node and not the NodeList which you are trying to do above.

Remember that getLoginBtn is the single node and the getLoginBtns is the NodeList.

1 Like

Perfectly summarise @RandellDawson - yeah and that was my issue all along! Cheers!