Entonces, cuando los usuarios hacen clic en el botón, quiero que desaparezca la primera sección y que se muestre la segunda. Lo que está pasando aquí es como un relámpago. La primera sección solo se esconde por un segundo, al igual que la segunda. Por favor, eche un vistazo a código mi código :)
HTML
<style> .hide{ display: none; } </style> <section id="first"> <form> <label for="p1Name">PLAYER ONE</label> <input type="text" id="p1Name" placeholder="TYPE PLAYER NAME"> <label class="label" for="p2Name">PLAYER TWO</label> <input type="text" id="p2Name" placeholder="TYPE PLAYER NAME"> <button id="start">START</button> </form> </section> <section id="second" class="hide"> <h1>HELLO, WORLD!!!</h1> </section>JavaScript
const button = document.querySelector("#start"); const firstPage = document.querySelector("#first"); const secondPage = document.querySelector("#second"); button.addEventListener('click', ()=>{ firstPage.classList.add("hide"); secondPage.classList.remove("hide"); console.log("work"); })El tipo predeterminado de un botón es enviar , como resultado, el formulario se envía al hacer clic en el botón. Puede establecer explícitamente el tipo de botón en button o puede evitar el evento dentro de la función del controlador de eventos de clic usando preventDefault() para permanecer en la página.
const button = document.querySelector("#start"); const firstPage = document.querySelector("#first"); const secondPage = document.querySelector("#second"); button.addEventListener('click', (e)=>{ firstPage.classList.add("hide"); secondPage.classList.remove("hide"); console.log("work"); e.preventDefault(); }) <style> .hide{ display: none; } </style> <section id="first"> <form> <label for="p1Name">PLAYER ONE</label> <input type="text" id="p1Name" placeholder="TYPE PLAYER NAME"> <label class="label" for="p2Name">PLAYER TWO</label> <input type="text" id="p2Name" placeholder="TYPE PLAYER NAME"> <button id="start">START</button> </form> </section> <section id="second" class="hide"> <h1>HELLO, WORLD!!!</h1> </section>