Context
I am currently learning web development and I recently made a small project which involved a user typing in a number from 1 - 64 and then a grid will be printed out within the given grid container that is x by x in size (x being the input that the user gives). Then if you hover your mouse over the grid it would change the colors of the squares cells that you hovered over, similar to an etch-and-sketch. However, I did not like this way of the user giving an input for the size and I wanted to change the method of user input to a 1-64 value slider where the grid would dynamically change size depending on where the user moves the slider.
My problem
I ran into a problem that I had when I still had the user text input where if the user already inputted a number for grid size and then inputted another number, what seemed to happen was that a sequential grid was being squeezed and fitted into the grid container along with the previous grid which prompted me to create a "reset" button to reset the grid, which felt sloppy in my opinion. It is still doing this with the slider element, if you move the slider to a point, it will create a grid of respective size depending on the value of the slider, but if you move the slider again, another grid seems to be trying to squeeze into the container with the previous one. Without having to manually have the user press a reset button etc., what should I do to make it so that each time the slider is changed, it would clear the grid first before putting a new one of different size in? I'd appreciate any help!
**My code snippet: **
const container = document.querySelector(".grid-container");
var slider = document.getElementById("slider");
var reset = document.getElementById("reset");
slider.addEventListener("change", () => { // This is the slider event listener
let squares = slider.value;
container.style.gridTemplateRows = `repeat(${squares}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${squares}, 1fr)`;
for (let i = 0; i < (squares * squares); i ) {
let square = document.createElement('div');
square.classList.add("square");
container.appendChild(square);
}
const gridCells = document.querySelectorAll(".square");
gridCells.forEach(cell => { // This is how the new property is added to grey-out a square after a square is hovered over
cell.addEventListener("mouseover", () => {
cell.classList.add("hov-square");
});
});
reset.addEventListener("click", () => { // This was the reset button I used previously, kept it here to let you see what I did to make it
gridCells.forEach(cell => {
cell.classList.remove("hov-square");
container.removeChild(cell);
});
});
});body {
display: flex;
flex-direction: column;
background-color: black;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.slider-container {
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
margin-top: 5%;
margin-bottom: 2%;
}
.grid-container {
width: 800px;
height: 800px;
display: grid;
border: 3px solid white;
}
.square {
border: 1px solid rgb(66, 66, 66);
}
.hov-square{ /* This property is added to each square cell if you hover over them, making them grey */
background-color: grey;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
<link rel="stylesheet" href="styles.css">
<title>Etch-a-Sketch</title>
</head>
<body>
<div >
<input type="range" min="1" max="64" value="10" id="slider">
<input type="reset" id="reset">
</div>
<div ></div>
</body>
</html>CodePudding user response：
If you want to ditch the reset button you can simply just set the innerHTML to empty in the on change listener and it will blank it out before it applies the new grid.
const container = document.querySelector(".grid-container");
var slider = document.getElementById("slider");
var reset = document.getElementById("reset");
slider.addEventListener("change", () => { // This is the slider event listener
let squares = slider.value;
container.innerHTML ="";
container.style.gridTemplateRows = `repeat(${squares}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${squares}, 1fr)`;
for (let i = 0; i < (squares * squares); i ) {
let square = document.createElement('div');
square.classList.add("square");
container.appendChild(square);
}
const gridCells = document.querySelectorAll(".square");
gridCells.forEach(cell => { // This is how the new property is added to grey-out a square after a square is hovered over
cell.addEventListener("mouseover", () => {
cell.classList.add("hov-square");
});
});
reset.addEventListener("click", () => { // This was the reset button I used previously, kept it here to let you see what I did to make it
gridCells.forEach(cell => {
cell.classList.remove("hov-square");
container.removeChild(cell);
});
});
});body {
display: flex;
flex-direction: column;
background-color: black;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.slider-container {
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
margin-top: 5%;
margin-bottom: 2%;
}
.grid-container {
width: 800px;
height: 800px;
display: grid;
border: 3px solid white;
}
.square {
border: 1px solid rgb(66, 66, 66);
}
.hov-square{ /* This property is added to each square cell if you hover over them, making them grey */
background-color: grey;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
<link rel="stylesheet" href="styles.css">
<title>Etch-a-Sketch</title>
</head>
<body>
<div >
<input type="range" min="1" max="64" value="10" id="slider">
<input type="reset" id="reset">
</div>
<div ></div>
</body>
</html>