Помогите разобраться с обработчиком событий
Есть простенькая игра. Таблица с ячейками (плитками) 10х10. Рандомно записывается в массив 10 ячеек и при правильно выборе закрашивается зеленым, если такой ячейки нет в массиве, то красным. Проблема вот в чем: я так понимаю обработчик событий запоминает каждый отслеживаемый клик и хранит. При начале новой "партии" клики так же висят в памяти (что очевидно) и даже если ячейки нет в массиве функция отрабатывает из памяти. Возможно стоит, каждый раз удалять обработчик при нажатии кнопки "заново" и так по кругу. Что посоветуете?
const table = document.querySelector('table');
const row = document.querySelectorAll('tr');
const columnInRow = Array.from(row).map(el => Array.from(el.children));
const column = document.querySelectorAll('td');
const start = document.querySelector('.start');
const reset = document.querySelector('.reset');
const addIdElements = () => {
Array.from(row).map((element, index) => element.id = index)
columnInRow.map((items, i) => {
items.map((item, index) => item.id = `${i}${index}`)
})
}
addIdElements();
const randomCell = count => {
const result = [];
for (let i = 0; i < count; i++) {
const value = Math.round(Math.random() * 100).toString();
if (value.length > 2) {
i--;
continue;
} else if (value.length < 2) {
result.push(`0${value}`)
} else if (result.includes(value)) {
i--
continue;
} else {
result.push(value)
}
}
return result
}
start.addEventListener('click', function (e) {
e.preventDefault();
table.style.backgroundColor = '#fff'
table.style.transitionDuration = '1s'
const values = randomCell(10);
console.log(values);
column.forEach(el => {
el.addEventListener('click', function (){
if (values.includes(el.id)) {
console.log(el.id);
el.style.backgroundColor = 'green';
} else {
el.style.backgroundColor = 'red';
}
})
})
})
reset.addEventListener('click', function (e) {
e.preventDefault();
table.style.backgroundColor = '#000';
column.forEach(el => {
el.style.backgroundColor = null;
el.style.transitionDuration = '.5s';
el.addEventListener('click', function () {
el.style.backgroundColor = null;
})
})
})body {
background: #ECE9E6;
background: -webkit-linear-gradient(to right, #FFFFFF, #ECE9E6);
background: linear-gradient(to right, #FFFFFF, #ECE9E6);
font-family: 'Roboto', sans-serif;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
}
table {
width: 400px;
height: 400px;
border: 5px solid #000;
margin-bottom: 20px;
background-color: #000;
transition: all 1s ease 0s;
background: #000000fa;
}
td {
width: 35px;
height: 35px;
border: 1px solid #000;
margin: 0;
padding: 0;
cursor: pointer;
transition: all .3s ease 0s;
text-align: center;
font-size: 18px;
font-weight: 600;
color: #fff;
}
td:hover {
background-color: #cccc;
transition: all .3s ease 0s;
}
.wrapper-button {
display: flex;
align-items: center;
justify-content: space-around;
width: 400px;
}
.btn {
font-family: 'Roboto', sans-serif;
width: 170px;
display: inline-block;
box-sizing: border-box;
padding: 0 30px;
outline: none;
border: none;
border-radius: 6px;
height: 40px;
line-height: 40px;
font-size: 17px;
font-weight: 600;
text-decoration: none;
color: #385898;
background-color: #d3e5f8;
cursor: pointer;
user-select: none;
appearance: none;
touch-action: manipulation;
}
.btn:focus-visible {
box-shadow: 0 0 0 2px #666;
}
.btn:hover {
background-color: #DBE7F2;
}
.btn:active {
transform: scale(0.96);
}
.timer {
line-height: 40px;
font-size: 17px;
font-weight: 600;
font-size: 36px;
padding: 30px 0 15px 0;
} <div class="container">
<div class="timer">Найдите все 10 плиток</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<label class="record"></label>
<div class="wrapper-button">
<button class="btn start">Играть </button>
<button class="btn reset">Заново</button>
</div>
</div>
<!-- /.container -->