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

Question

[Александр]

Есть кнопка у которой id=go и есть несколько div с классом= grid

<a id="go">клик<a>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>

Как сделать так чтобы при клике на кнопку всем дивам приписывался class="active"?

Делал так, не получилось:
Классу давал id и через js к нему обращался и он добавлял дополнительный class="active" только первому div. Но надо для всех

<a id="go">клик<a>
<div class="grid" id="r" ></div>
<div class="grid" id="r"></div>
<div class="grid" id="r"></div>
<div class="grid" id="r"></div>
<div class="grid" id="r"></div>

let go= document.getElementById('go');
let r= document.getElementById('r');

go.addEventListener('click', function(){
    r.classList.toggle('active');
})

Comments

[Elvis]

Никогда не делай id одинаковыми!

[Elvis]

При клике на кнопку выбираешь все элементы с классом grid и в цикле применяешь toggle

[Александр]

Elvis, какой цикл, у меня в проекте количество div динамически меняется?

[Александр]

Elvis, сделал так

document.getElementById('go').addEventListener('click', () => {
  document.querySelector('.grid').classList.toggle('active');
});

добавился так же только первому диву

[Ankhena]

poshuriku, querySelector выбирает только первый элемент.
Вам нужен querySelectorAll и, например, forEach

[Elvis]

poshuriku, с телефона сложно но как то так

document.getElementById('go').addEventListener('click', () => {
  let divs = document.querySelectorAll('.grid');
for(let d of divs) {
d.classList.toggle('active');
});

[Александр]

Elvis, спасибо большое, теперь все работает))

Answer 1

[wonderingpeanut]

Через document.querySelectorAll(selector) находишь все элементы, которым нужно добавить класс. Преобразуешь полученный лист в массив и потом каждому элементу массива добавляешь класс

const elements = document.querySelectorAll('.my-class') // найти все элементы с классом .my-class
const elementsArray = [...elements]; // преобразование в массив
elementsArray.forEach(el => {
  el.classList.add('class-to-add');
}

Answer 2

[Elvis]

document.getElementById('go').addEventListener('click', () => {
  let divs = document.querySelectorAll('.grid');
  for(let d of divs) {
    d.classList.toggle('active');
});