Deseaba generar una pequeña ventana emergente para confirmar si el usuario desea escapar o permanecer en la página; sin embargo, tan pronto como hago clic en EJECUTAR id de entrada = "openBtn", aparece la ventana emergente y luego desaparece de inmediato. no se que hice mal
CSS
.pop-up{ display: none; } .pop-up.active{ display: flex; position: absolute; background-color: #fff; font-size: 30px; color: #222831; flex-direction: column; align-items: center; height: 150px; width: 250px; top: 200px; left: 170px; border: 5px double #393E46; border-radius: 10px; box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3); }GUIÓN.JS
const openBtn = document.getElementById("openBtn"); const popUp = document.querySelector('.pop-up'); const stayBtn = document.getElementById("stayBtn"); openBtn.addEventListener('click', () =>{ popUp.classList.add('active') }) stayBtn.addEventListener('click', () =>{ popUp.classList.remove('active') })HTML
<div class="controls"> <div class="left"></div> <form action="" method="post" class="right"> <input type="submit" name="fight" value="FIGHT"> <input type="submit" name="pkmn" value="PKMN"> <input type="submit" name="item" value="ITEM"> <input type="submit" id="openBtn" value="RUN"> </form> </div> </div> <div class="pop-up"> <p>Escape battle?</p> <form action="" method="post" class="buttons"> <input type="submit" class="button" id="stayBtn" name="stay" value="Stay"> <input type="submit" class="button" name="escape" id="run" value="Run"> </form> </div>Solo quería tener una opción de confirmación para salir donde uso una clase para que la pantalla css cambie a ninguno y flex.
Te falta e.preventDefault() en tu openBtn ,
Dentro del modal usé button type="button" en lugar de input="submit" , que es una mejor práctica y con eso no necesitas e.preventDefault()
Nota: no cambié los controles de input a button porque no sé qué estás haciendo con él.
const openBtn = document.getElementById("openBtn"); const popUp = document.querySelector('.pop-up'); const stayBtn = document.getElementById("stayBtn"); openBtn.addEventListener('click', e => { e.preventDefault() popUp.classList.add('active') }) stayBtn.addEventListener('click', () => { popUp.classList.remove('active') }) .pop-up { display: none; } .pop-up.active { display: flex; position: absolute; background-color: #fff; font-size: 30px; color: #222831; flex-direction: column; align-items: center; height: 150px; width: 250px; top: 200px; left: 170px; border: 5px double #393E46; border-radius: 10px; box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3); } <div class="controls"> <div class="left"></div> <form action="" method="post" class="right"> <input type="submit" name="fight" value="FIGHT"> <input type="submit" name="pkmn" value="PKMN"> <input type="submit" name="item" value="ITEM"> <input type="submit" id="openBtn" value="RUN"> </form> </div> <div class="pop-up"> <p>Escape battle?</p> <button type="button" class="button" id="stayBtn" name="stay">Stay</button> <button type="button" class="button" name="escape" id="run" value="Run">Run</button> </div>Estás en un formulario. Cada vez que hagas clic en un botón o ingreses input[submit] , darás una solicitud de publicación con los valores dados al servidor. Después de enviar la solicitud, el navegador te mostrará su respuesta de manera predeterminada. redirigir, debe agregar e.preventDefault() . Para este escenario, deberá cambiar a
openBtn.addEventListener('click', e => { e.preventDefault() popUp.classList.add('active') })