Как поменять при клике классы и при повтором вернуть все обратно?

Question

[Flagname]

Нужно решение на чистом JS.
Я сделал следующее https://jsfiddle.net/am0qj4y9/
Не понимаю, почему не работает.

TypeError: Cannot read property 'addEventListener' of undefined

Answer 1

[Олег]

Попробуй разобраться сам https://www.w3schools.com/howto/howto_js_toggle_cl...

Answer 2

[Тигран Абрамян]

const enter = document.querySelector('.sign-in');
const backgroundForm = document.querySelector('.backgroundForm');
const login = document.querySelector('.login');

enter.addEventListener('click', function() {
  backgroundForm.classList.toggle('active');
  login.classList.toggle('active');
});

Comments

[Flagname]

В песочнице все работает, но у меня ошибка появляется

TypeError: Cannot read property 'addEventListener' of null

Я так понимаю, что-то код срабатывает до загрузки какого-то элемента
Задержка тоже не помогает.
Можете помочь?

[Андрей Пике]

Код срабатывает по клику.
У вас тут в контексте enter = document.querySelector('.sign-in') - и, скорее всего, его не существует во время инициализации.
Инициализируйте click только по window.onload, проверяя, что в это время document.querySelector('.sign-in') уже определён.

[Андрей Пике]

Ну, или пример для jQuery:

$(() => {
$.('.sign-in').click(() => {
...initializing click..
})',
})

[Андрей Пике]

$(() => {
    $.('.sign-in').click(() => {
       ...initializing click..
    })',
})

Answer 3

[Илья Терещенко]

const enter = document.getElementsByClassName('sign-in')[0];
const backgroundForm = document.getElementsByClassName('backgroundForm')[0];
const login = document.getElementsByClassName('login')[0];

    enter.addEventListener('click', function() {
        backgroundForm.classList.toggle('active');
        login.classList.toggle('active');
    });

1. Некорректные имена классов записываешь в переменную.
2. в ByClassName точка перед именем класса не ставится.
3. Ты зачем-то оборачиваешь в функцию событие.

Comments

[Flagname]

Здесь все работает, но у меня вылезает ошибка TypeError: Cannot read property 'addEventListener' of null
Что-то не успевает отрисоваться?
Задержка не помогает

[Илья Терещенко]

Flagname,

if(enter) {
   enter.addEventListener('click', function() {
        backgroundForm.classList.toggle('active');
        login.classList.toggle('active');
    });
}