Использование JS для добавления цвета фона в динамически созданный Div
Добрый вечер,
У меня возникли проблемы с использованием прослушивателя событий щелчка для изменения цвета фона созданного js div.
Я просмотрел вопросы, но я в тупике, почему, даже если я объявлю функцию после того, как div были созданы и добавлены, она все равно не меняет цвет.
Код ниже.
<link rel = "stylesheet" href = "index.css">
<style>
</style>
<script src = "script.js" defer > </script>
<body>
<h1> Grid aye? </h1>
<div class = "wrapper">
<aside class = "toggleBar"> This is where the switches will go </aside>
<!-- This where the grids are created, using psuedo classes in CSS. -->
<div id = "container"></div>
</div>
</body>
</html>
JS
const container = document.getElementById("container");
const gridItem = document.getElementById("grid-item");
// uses a loop to create the required divs
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);
function changeGridColor (e) {
e.style.backgroundColor = "red";
};
gridItem.addEventListener(`click`,changeGridColor());
Может ли кто-нибудь указать мне, где я ошибся?
Я попытался объявить прослушиватель событий перед добавлением созданных div, но это вызывает ошибки в VSCode.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
const gridItem = document.getElementById("grid-item");
Эта строка будет неправильной, потому что ни один элемент в вашем HTML не имеет grid-item с идентификатором в этот момент выполнения скрипта.
Вам нужно будет поставить эту строку после makeRows(16, 16);.
Кроме того, в container.appendChild(cell).className = "grid-item"; вы добавляете класс, не идентификатор. Так что const gridItem = document.getElementById("grid-item"); не будет правильным и должен быть const gridItems = document.querySelectorAll(".grid-item").
Поскольку в этом классе есть несколько div, вам нужно будет перебрать их, чтобы подключить прослушиватель событий. Вместо gridItem.addEventListener(click, changeGridColor); вам понадобятся:
const gridItems = document.querySelectorAll(".grid-item");
for(let gridItem of gridItems) {
gridItem.addEventListener(`click`, changeGridColor);
}
Обновлено: и e.style.backgroundColor = "red"; должно быть e.target.style.backgroundColor = "red";
@Venex: Кроме того, будьте осторожны с многоточием. в gridItem.addEventListener(click,changeGridColor()); вы передаете undefined регистрации eventListener, потому что выполнение changeGridColor ничего не возвращает. -- Без скобок это ссылка на функцию, а не вызов функции. ;)
Нет проблем, я добавляю одно исправление в редактирование :)
Эй, спасибо за комментарии. Хотя по-прежнему возникают проблемы с получением функции changeGridColor() при использовании changeGridColor (e), на самом деле цвет не меняется.
Другое решение верно, что элемент к тому времени не существует. Однако, если вы добавите больше строк, к этим новым строкам/элементам сетки не будет присоединен прослушиватель событий.
Вместо этого вы можете положиться на более универсальный метод делегирования событий, чтобы гарантировать, что все будущие элементы сетки будут иметь прослушиватель событий:
// uses a loop to create the required divs
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
cell.classes = ['grid-item'];
cell.style.setProperty('height', '24px');
cell.style.setProperty('background-color', 'black');
container.appendChild(cell).className = "grid-item";
};
};
makeRows(16, 16);
function changeGridColor (e) {
e.style.backgroundColor = "red";
};
document.addEventListener('click',function(e){
console.info(e.target.classes);
if (e.target && e.target.classes.includes('grid-item')){
changeGridColor(e.target);
}
});
Мы добавляем класс grid-item, а затем настраиваем прослушиватель событий щелчка, чтобы при каждом щелчке класса элемента сетки менялся цвет.
Вот рабочий jsfiddle: https://jsfiddle.net/1e7c2gzu/22/
(Также обратите внимание, что изначально вы не увидите свои элементы сетки, потому что у них нет размера, поэтому я добавил размер и сделал их черными, чтобы вы могли их видеть)
Эй, спасибо за ответ, я использовал CSS, чтобы присвоить параметры высоты и ширины классу элементов сетки, но это кажется намного лучшим способом, так что спасибо за это. Я установлю оригинальные реквизиты при создании и удалю CSS.
Ага, если у вас уже есть класс css .grid-item, то я бы порекомендовал придерживаться для этого класса css и не делать строки настройки высоты и цвета фона, которые я сделал! В любом случае, ключевой вещью здесь был общий прослушиватель событий.
Эй, спасибо за всю помощь и потраченное время. Теперь он работает намного лучше, буду делать пометки о помощи и различиях между кодом. Никогда не думал использовать оператор if, чтобы гарантировать, что функция срабатывает в правильном Div!
Я знал, что это как-то связано с созданием div, но это просто не регистрировалось. Большое спасибо!