JavaScript

Почему js код отрабатывает 1 раз?

 document.querySelector('.header__info-item').onclick = function () { 

  document.querySelector('.header__info-item.active').classList.remove('active'); 

  document.querySelector('.header__info-item').classList.add('active'); 

};
Один раз сносит класс и добавляет новый, а второй раз уже нет. Если сможете в гугле найти, скидывайте, я не нашёл
АИ
Антон Иванов
1 458
Дебажь код. Проверь, какие элементы он находит на каком этапе.
Логика кода мне не очень понятна. Если там несколько подобных элементов, тогда им всем нужно задать это событие click, а не одному. Если там один такой элемент, то зачем у него забирать active и тут же возвращать. Если их несколько, то зачем задавать класс первому найденному элементу, а не тому, на который ты нажимал.
Я кажется понял, в чем твоя ошибка. Ты просто активируешь всегда один и тот же элемент, который первым найден. Да и событие только у одного элемента.
Андрей Бердяев
Андрей Бердяев
54 038
Лучший ответ
В чём логика кода?
Предположим, на странице 5 таких ссылок. Событие повешено только на первую ссылку
При клике на эту первую ссылку уберётся первый найденный класс active и добавится на первую ссылку
При повторном клике на первую ссылку с неё уберётся класс active и тут же добавится обратно
При клике на остальные 4 ссылки ничего не произойдёт в этом коде
БК
Баходир Косимов
53 079
Обычно в таких вопросах ошибка в том, что использовал querySelector вместо querySelectorAll. Второе позволяет повесить обработчик на все элементы, но требует цикла.
Нурлан Тастембеков
Нурлан Тастембеков
71 808
ленивая жопень снова накосячала и ждет решения от добрых хомячков
Я_
Я _Тебя_Украду !
51 592
Axel Lock эта ленивая жопень хотя бы пробует чему то научиться, а не залипает в дотке, как сверстники) Хотя бы из за этого таким стоит помогать и ставить на путь истинный.
потому что удаляешь класс active потом его уже нету а ты ищешь по сочетанию active+ header__info-item
Алексей Красильников
Алексей Красильников
59 846
подозреваю потому что ты юзаешь какой то фреймворк типа jQuery, и там естественно асинхронный вызов
ты не можешь синхронно получить результат первого вызова через него
ты должен заюзать колбэк и делать повторный вызов уже из него
Владимир Трущенков
Владимир Трущенков
15 114
Андрей Бердяев Тут нет jQuery. И асинхронно такие вещи тоже не выполняются нигде.
Андрей Бердяев Ну разве что click асинхронно вызывается, но дело же в том, что он на элемент нажимает.
Напиши просто document.querySelector(".header__info-item").toggle("active");

document.querySelector('.header__info-item').onclick = function () {
document.querySelector(".header__info-item").toggle("active");
};
Александр Осин
Александр Осин
602 
 const infoItem = document.querySelector('.header__info-item'); 

infoItem.addEventListener('click', ()=>{ 

    if(infoItem.classList.contains('active')){ 

        infoItem.classList.remove('active'); 

    } 

    else{ 

        infoItem.classList.add('active'); 

    } 

})
Держи. это будет точно работать. Аналогия того, как ты пытаешься сделать, но это будет более правильнее.
Мы выводим данный блок в переменную infoItem. Чтобы укоротить код.
Используем ЕвентМенеджер и пишем простое условие, которое проверит имеет-ли твой блок класс "active". Если такого класса нет - тогда мы его добавим, если оно уже есть, тогда при нажатии - мы его удалим.
ДА
Дилшод Алиев
450
Abdurashid Turgunboev Не знаем что classList имеет мeтод toggle? Может это всё таки будет правильнее?
 const infoItem = document.querySelector('.header__info-item');  

infoItem.addEventListener('click', () => {  

    infoItem.classList.toggle('active'); 

});
Или вот так (но выглядит так себе):
 document.querySelector('.header__info-item').addEventListener('click', () => {  

    this.classList.toggle('active'); 

});

НО. Не соглашусь с вашим "это будет точно работать". Вы не знаете что автор пытается сделать. Так как тут куча не ясностей:
  1. Если элемент из списка подобных элементов надо сделать активным, то почему используется querySelector а не querySelectorAll?
  2. Если всё таки надо одному, то каков в этом смысл?
  3. Могут ли быть несколько активных элементов или нужен только один?
:)
Дилшод Алиев может быть будет и правильнее. любой код можно написать множеством методов, согласитесь. И все они будут адекватно работать.
1) не вижу проблемы в том, чтобы сделать массив. Его дописать пустяки, просто обернуть событие в массив и добавить переменную массива к переменной класса. Минута делов
2) Есть смысл. А как, например делают, например выбор языка на сайт с выдвигающейся панелькой, при клике на кнопочку? Или например бургер меню для адаптации под моб?) Это единичные элементы обычно на сайте.
3) В любом случае я с вами в какой то степени соглашусь. Код вы укоротили, работоспособность его осталась прежней. Автор темы не указал, для чего конкретно и в каких целях ему скрипт. Поэтому тут вы вправе тоже сомневаться, нужен массив или нет.

Похожие вопросы