Блог

Главная - Вопросы по программированию - Я создал несколько divs с использованием JS, однако только один из них реагирует на манипуляции с DOM

Я создал несколько divs с использованием JS, однако только один из них реагирует на манипуляции с DOM

#javascript #dom #setattribute

#javascript #dom #setattribute

Вопрос:

Я хочу изменить цвет всех моих divs, которые я создал с помощью Javascript. Мой код должен был дать им всем одно и то же имя класса и идентификатор, но только один из них меняет цвет или взаимодействует с моими манипуляциями с DOM. Можете ли вы сказать мне, что я делаю не так, или как я могу это исправить?

 function makeRows(rows, cols){
for (let i = 0; i < (rows * cols); i  ){
  let container= document.getElementById("container");
 let cell= document.createElement("div");
  cell.innerText = (i   1);
  cell.setAttribute('id','box');
  container.appendChild(cell).className = "gridBox"; 
}
};

makeRows(16,16);

//events

const box= document.getElementById('box');
document.getElementById('box').setAttribute("style", "background-color:red;");

Ответ №1:

Когда вы создаете несколько div, вы должны использовать querySelectorAll для выбора всех элементов с классом .box 

 document.querySelectorAll('.box').forEach(box => {
   box.setAttribute("style", "background-color:red;");
});
Метки: , ,