Onclick для созданных div-ов
Здравствуйте, я недавно начал осваивать css под браузер, возника следующая задача : Создать матрицу, каждая ячейка загорается случайным цветом при нажатии по ней клавишей, гаснет при повторном клике.
Никак не могу понять- как каждой будущей ячейке присвоить событие onclick, которое будет изменять цвет той ячейки, по которой тыкнуть. Понимаю, что вопрос скорее всего дурацкий, но помогите решить эту проблему , пожалуйста. код : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
function game()
{
var text = document.getElementById("vvod"); //Кол-во элементов
val = text.value;
var pole = document.createElement("div");
pole.id="pole";
document.body.appendChild(pole);
mas = [];
for (var i = 0; i <= val; i++)//создание поля из элементов(div-ов)
{
var div = document.createElement("div");
div.className="man";
div.id="matrix";
mas[i]=div;
document.getElementById('pole').appendChild(mas[i]);
}
document.getElementById("but2").disabled=false;
document.getElementById("but").disabled=true;
for ( var i = 0; i <= mas.length; i++) //проблемная зона
{
mas[i].onclick=function()
{
mas[i].style.background=getRandomColor();//getRandomColor()не указана в этом коде, т.к. не влияет ни на что, кроме цвета.
}
}
}
function dte()
{
document.getElementById("but").disabled=false;
document.getElementById("but2").disabled=true;
for (var i = 0; i <= mas.length; i++)
{
mas[i].remove();
}
}
</script>
</head> <body> <h3>Введите количество ячеек : </h3> <input type="text" maxlength="4" size="2px" value="98" id="vvod"></input> <button id="but" onclick="game()">"подтвердить"</button> <button id="but2" onclick="dte()" disabled> удалить матрицу</button> </body> </html> |
BadBonus,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Зачем вешать обработчики на все элементы?
Вешаем на элемент родитель, задаем каждому новосозданному диву пользовательский атрибут вида data-*
pole.onclick = function(event) {
if (!event.target.hasAttribute('data-*')) return; // проверяем туда ли попал клик
var elem = event.target;
elem.style.background=getRandomColor()
};
Вуаля, обработчик один, но обрабатывает все дивы. |
BadBonus,
Цитата:
|
| Часовой пояс GMT +3, время: 14:14. |