Здравствуйте, я недавно начал осваивать 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>
