时间戳

首页 > 解决方案 > how to make my for loop continue after using a reset

javascript - how to make my for loop continue after using a reset

问题描述

I just need some guidance. I feel a bit lost with why my for loop stopped. it's a simple etch-a-sketch game, the for loop before the reset responds but after creating new grids, it doesn't load anymore. My knowledge is lacking on what I can do next. I would love some guidance, if you do fix the code please offer me an explanation or some resource that I can refer so I can understand myself.

Here is my code:

//first div
let container = document.createElement('div')
container.setAttribute('id', 'container');
container.classList.add("grid");
document.body.appendChild(container);



//second div

let containerGrid = document.createElement('div')
containerGrid.setAttribute('id', 'containerGrid');
containerGrid.classList.add("grids");
document.body.appendChild(containerGrid);

//button div
let buttonDiv = document.createElement('div')
buttonDiv.setAttribute('id', 'button');
buttonDiv.classList.add("button");
document.body.appendChild(buttonDiv);

//buttons
const startAgain = document.createElement('button');
startAgain.setAttribute('id', 'createbtn');
startAgain.style.padding = "10px";
startAgain.textContent ="New grid"

container.appendChild(startAgain);

//onclick events
const resetbtn = document.getElementById("resetDivs");
resetbtn.onclick = () => resetGrid()

createbtn.onclick = () => makeCols(); 
console.log(resetbtn);



//hover color event

function random (number) {
  return Math.floor(Math.random() * (number +1));
}

function rainbowColor (e) {
    const rndCol= 'rgb(' + random(255) + ',' + random(255) +',' + random(255) + ')';
    e.target.style.backgroundColor = rndCol;
}

//grid function
function resetGrid () {
    containerGrid.innerHTML =""
    }

//make grid 16*16

function makeCols (col) {
    for (let i = 0; i < 16*16; i++) {
        const colDivs = document.createElement('div');
        colDivs.setAttribute('id', 'col-row');
        colDivs.classList.add('cols');
        colDivs.textContent ="";
        colDivs.style.border = ('solid');
        colDivs.style.display= ('grid');
        colDivs.style.padding = ('5px');
        containerGrid.appendChild(colDivs);
    }
}
makeCols (16);


let inputs = document.querySelectorAll('.cols');
for(let k=0; k<inputs.length; k++) {
    inputs[k].onclick = rainbowColor;}
let resets = document.querySelectorAll('.cols');
for(let p=0; p<inputs.length; p++) {
        inputs[p].onmouseover = rainbowColor;
}
.grid {

width:500px;

}

.grids {

    display: grid;
    justify-content:center;
    align-items:center;
    grid-template-columns: repeat(16,1fr);
    grid-auto-rows:repeat(16,1fr);
    padding: 50px 50px;
    margin-left:150px;
    height:100px;
    width:200px;
 }

.rows {
    height:10px;
    width:10px;
    grid-column-gap:10px;
   

}
.cols {
    height:10px;
    width:10px;
    color:black;
}

.palette.cols:hover {
   background-color:'black'; 
}
<!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">
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div id ="color-picker" class = "palette">
        <input type="color" name="Rainbow" id="rainbow-colors" value= "#e66465">
        <label for="Rainbow">Rainbow</label>
    </div>
        
    <div id = "black-pick" class = "black-color">
        <input type="color" name="Black" id="black-color" value="#rrggbb">
        <label for="Black">Black</label>
    </div>

    <div id ="resetDivs" class= "btnReset">

    <input type="button" value="Reset">
    </div>
    <script src="app.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

Move your for loops into the makeCols() because when you reset it removes all the divs along with their event listeners. Before you only assigned the events on page load. You need to assign the events anytime you make new divs.

function makeCols (col) {
    for (let i = 0; i < 16*16; i++) {
        const colDivs = document.createElement('div');
        colDivs.setAttribute('id', 'col-row');
        colDivs.classList.add('cols');
        colDivs.textContent ="";
        colDivs.style.border = ('solid');
        colDivs.style.display= ('grid');
        colDivs.style.padding = ('5px');
        containerGrid.appendChild(colDivs);
    }
    
    let inputs = document.querySelectorAll('.cols');
    for(let k=0; k<inputs.length; k++) {
        inputs[k].onclick = rainbowColor;}
    let resets = document.querySelectorAll('.cols');
    for(let p=0; p<inputs.length; p++) {
            inputs[p].onmouseover = rainbowColor;
    }
}
makeCols (16);

推荐阅读