Всем привет. Учу js. Делаю не большую игру. Создал таблицу 10 на 10. Создал массив и заполнил его 10 случайными числами от 1 до 100. На каждую ячейку повешал событие, по клику на ячейку надо проверить, есть ли содержимое этой ячейки (число) в массиве со случайными числами. Если есть то задать
background этой ячейке красным, а если нет - желтым. Но что то пошло не так и не работает проверка у меня, ячейки всегда красятся в желтый. Где у меня ошибка?
<table>
</table>
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}
let arrWinNums = [];
for (var i = 0; i < 10; i++) { // заполнил массив 10-ю случайными числами от 1 до 100
if (arrWinNums.length < 10) {
let numArr = randomInteger(1,100);
if (arrWinNums.indexOf(numArr) == -1) {
arrWinNums.push(numArr);
} else {
i = 0;
}
} else {
break;
}
}
let table = document.querySelector('table'); // создал таблицу 10 на 10.
let count = 1;
for (var i = 0; i < 10; i++) {
let tr = document.createElement('tr');
table.appendChild(tr);
for (var j = 0; j < 10; j++) {
let td = document.createElement('td');
td.innerHTML = count++;
td.addEventListener('click', function(){ //событие: при клике проверяю
for (var i = 0; i < arrWinNums.length; i++) { //равно ли содержимое ячейки
if (this.innerHTML == arrWinNums[i]) { //хоть одному элементу массива
this.style.background = 'red';
} else {
this.style.background = 'yellow';
}
};
});
tr.appendChild(td);
};
};
console.log(arrWinNums)
function randomInteger(min, max) { // Возвращает целое число в заданном диапазоне
let rand = min + Math.random() * (max + 1 - min);
return Math.floor(rand);
}
