Много одинаковых кнопок, которые меняют класс одному div

Я новичок в js. Столкнулся с проблемой. Есть много одинаковых кнопок на одной странице, которые убирают класс в одном div. Но срабатывает только первая. Остальные не работают. Подскажите как сделать правильно?

Кнопка:

<a id="forma-lang">Заказать&nbsp;перевод</a>

div который меняет класс:

<div id="shop" class="no-display">

И код js:

document.getElementById('forma-lang').onclick = function() { document.getElementById('shop').classList.toggle('no-display');

}


Ответы (1 шт):

Автор решения: RunDevil

Ну начнём с того, что один конкретный id может быть только у одного элемента на странице, а т.к. у тебя много одинаковых кнопок, то id у кнопок следует заменить на class. И получаем вот такой код:

<a class="forma-lang">Заказать&nbsp;перевод</a>


document.querySelectorAll(".forma-lang").forEach(el => {
    el.addEventListener("click", ()=>{document.getElementById('shop').classList.toggle('no-display')})
})
→ Ссылка