Моя makeRows функция работает не так, как я ожидал, я не уверен, правильно ли я поступаю. Когда я нажимаю «очистить все», запускается приглашение для создания новых строк и столбцов, но класс mouseOver не добавляется обратно ко всей сетке, а только к нижней части.
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty("--grid-rows", rows);
container.style.setProperty("--grid-cols", cols);
for (c = 0; c < rows * cols; c++) {
const cell = document.createElement("div");
container.appendChild(cell).className = "grid-item mouseOver";
}
}
window.onload = makeRows(16, 16);
const btn = document.querySelector("button");
const div = container.getElementsByTagName("div");
function reset() {
[].forEach.call(div, function (el) {
el.classList.remove("mouseOver");
});
let num = prompt("How many rows and cols?");
makeRows(num, num);
}
btn.addEventListener("click", reset);
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1rem;
border: 1px solid #ddd;
text-align: center;
}
.mouseOver {
transition: 0s 10s;
}
.mouseOver:hover {
background-color: aqua;
transition: 0s;
}
#btn {
max-width: 100%;
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch-A-Sketch</title>
<link rel="stylesheet" href="etch.css" />
</head>
<header>
<button id="btn">Clear All</button>
</header>
<body>
<div id="container"></div>
</body>
<footer>
<script src="etch-script.js"></script>
</footer>
</html>