Me gustaría revelar un elemento ("hidText") cuando finalice el actual setInterval ("fillUp"). Intenté agregar una función if en la función fillUp pero no se ejecutará. ¿Hay alguna forma de arreglar esto? ¡Gracias!
let blankSquare = document.querySelectorAll(".square"); let hidText = document.querySelector(".hidText"); let index = 0; function fillUp() { setInterval(() => { blankSquare[index++].classList.add("fill") }, 1000); if (index >= 4) { hidText.classList.add("display") } } fillUp(); .square { margin: 1vh; height: 3vh; width: 3vh; background-color: none; border: solid 2px grey; } .fill { background-color: grey; } .hidText { display: none; } .display { display: all; } <div class="squares"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <p class="hidText"> Hello There </p>Usar display: block; en cambio.
Además, no olvide borrar el intervalo, de lo contrario continuará indefinidamente.
let blankSquare = document.querySelectorAll(".square"); let hidText = document.querySelector(".hidText"); function fillUp() { let index = 0; const timer = setInterval(() => { blankSquare[index++].classList.add("fill") if (index >= blankSquare.length) { clearInterval(timer) hidText.classList.add("display") } }, 1000); } fillUp(); .square { margin: 1vh; height: 3vh; width: 3vh; background-color: none; border: solid 2px grey; } .fill { background-color: grey; } .hidText { display: none; } .display { display: block; } <div class="squares"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <p class="hidText"> Hello There </p>Hubo un par de pequeños errores. Aunque bastante simple.
Para cambiar una propiedad CSS en un elemento, puede acceder a ella en la propiedad de estilos del elemento en JS.
Además, generalmente es una mala práctica dejar que el intervalo se ejecute cuando ya no es necesario,
así como dejar que intente cambiar elementos fuera de los límites en una lista.
let blankSquare = document.querySelectorAll(".square"); let hidText = document.querySelector(".hidText"); let index = 0; var interval = setInterval(() => { if (blankSquare.length == index) { hidText.style.display = "block"; clearInterval(interval); } else blankSquare[index++].classList.add("fill") }, 1000); .square { margin: 1vh; height: 3vh; width: 3vh; background-color: none; border: solid 2px grey; } .fill { background-color: grey; } .hidText { display: none; } .display { display: all; } <div class="squares"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <p class="hidText"> Hello There </p>su if ahora está dentro de setInterval.
recuerde que SetInterval() no se detiene, por lo que debe llamar a ClearInterval()
ClearInterval necesita una ID para trabajar, por lo que podemos usar let o const
let myIntervalId = setInterval(() => { /* your code */ }ahora pasando el DNI
clearInterval(myInterval); ahora el si ya no tiene >= pero > entonces podemos hacer también el quinto elemento
en CSS no hay ninguna display: all , puede usar básicamente grid o flex o block o cualquier cosa que sea compatible con css (en esto no todo es compatible)
let blankSquare = document.querySelectorAll(".square"); let hidText = document.querySelector(".hidText"); let index = 0; function fillUp() { let myInterval = setInterval(() => { blankSquare[index++].classList.add("fill") console.log("index: " + index); if (index > 4) { hidText.classList.add("display"); console.log("index: " + index + " so is hidden now"); /* stop the setInterval */ clearInterval(myInterval); } }, 1000); } fillUp(); .square { margin: 1vh; height: 3vh; width: 3vh; background-color: none; border: solid 2px grey; } .fill { background-color: grey; } .hidText { display: none; } .display { display: grid; } <!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>Document</title> <link rel="stylesheet" href="style.css"> <script src="./app.js" defer></script> </head> <body> <div class="squares"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <p class="hidText"> Hello There </p> </body> </html>