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

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