Как периписать скрипт что бы отработывал на двух элементах?

Question

[barsecky]

День добрый!
На сайте есть кнопка поиска, ее нужно продублтировать в мобильном меню.
Вопрос заключается в том что одна кнопка работает а вторая нет.
Познаний в JS не достаточно((
Что нужно изменить в скрипте что бы отрабатывали обе одинаково?
Спасибо за помощь.
https://codepen.io/alexej-barsukow-the-flexboxer/p...

Answer 1

[sinneren]

querySelector - выбирает 1 элемент. у вас их несколько. нужно querySelectorAll.
А дальше перебирать в цикле overlay1, та же история с остальными элементами, которых > 1

Comments

[barsecky]

это я понимаю)) просто если просто сделать все querySelectorAll, тогда начинает ругаться на addEventListener((
просто я не особо знаю JS что бы переписать скрипт(((

[sinneren]

barsecky, нет, не понимаете, я же написал, перебирать в цикле

[Алексей]

barsecky, если у тебя будет querySelectorAll, то это псевдомассив. его нужно перебрать любым циклом и повесить обработчик на каждый элемент из массива.
// targets - тут будут все кнопки
targets = querySelectorAll('.....');
//перебираем их и каждой вешаем обработчик события
targets.foeEach(elem => {
elem.addEventListener('click', (e) => {
// здесь код работы кнопки.
}};

Вот так обе кнопки будут делать одно действие

const overlays = document.querySelectorAll('.overlay');

const search = document.querySelector('.search');
const input = document.querySelector('.input');

overlays.forEach(elem => {
elem.addEventListener('click', () => {
search.classList.toggle('active');
if (search.classList.contains('active')) {
setTimeout(() => {
input.focus();
}, 200)
}
})
})

[barsecky]

sinneren, похоже что вы правы((( не понимаю из-за не достаточног понимания самого JS

[barsecky]

Алексей, спасибо за помощь. Но или я вставляю не так или что то не работает(( все равно отрабатывает только одна кнопка(((