Así que tengo este botón que al hacer clic tiene una función que muestra un elemento. Ahora quiero agregar una función por defecto que ocultará este mismo elemento después de un intervalo dado. Entonces, si hago clic en este botón, se mostrará div-container después de .5s. Ahora quiero verificar que si se muestra este contenedor div, los usuarios pueden leerlo y luego se ocultará. Así que es más como una alerta.
Aquí está mi fragmento:
document.getElementById("mybtn").addEventListener("click",function(){ let clock = setInterval(() => { clearInterval(clock) clock = null document.getElementById('alert').style.display = 'block' }, 500) }) // this is where I tried to make it hide after some given interval but it's not working var alert = document.getElementById('alert'); if(alert.style.display==="block"){ let clock = setInterval(() => { clearInterval(clock) clock = null document.getElementById('alert').style.display = 'none' }, 500) } <button id="mybtn">Show/hide</button> <div id="alert" style="display:none"><h3>this is an alert</h3></div>Creo que estás buscando setTimeout .
let clockTimeout = null document.getElementById("mybtn").addEventListener("click",function(){ document.getElementById('alert').style.display = 'block' clearTimeout(clockTimeout) clockTimeout = setTimeout(() => { document.getElementById('alert').style.display = 'none' }, 1500) }) <button id="mybtn">Show/hide</button> <div id="alert" style="display:none"><h3>this is an alert</h3></div>Dentro de su evento, primero debe mostrar el contenedor div de alerta. luego establece el tiempo de espera. dentro de la función de tiempo de espera, vuelve a ocultar el cuadro de alerta.
document.getElementById("mybtn").addEventListener("click",function(){ document.getElementById('alert').style.display = 'block' let clock = setInterval(() => { document.getElementById('alert').style.display = 'none' }, 5000) }) <button id="mybtn">Show/hide</button> <div id="alert" style="display:none"><h3>this is an alert</h3></div>