0
227
VistasclassList.remove() está eliminando la clase pero no su contenido
Estoy tratando de agregar una clase y eliminar otra clase al hacer clic en el botón de inicio de prueba. Si bien la clase 'info_box' se agrega con éxito, la clase 'start_btn' no se elimina, solo cambia la posición (de flex a no flex). este es el html
<body> <div class="container"> <div class="start_btn" > <button type="button" class="startBtn">Start Quiz</button> </div> <div class="row info_box"> <div class="col-md-6"> <!--Rest of the code-->Este es el CSS
/*START BUTTON BOX*/ .start_btn { height:80vh; display: flex; justify-content:center; align-items:center; } .startBtn{ font-size: 25px; font-weight: 500; color: var(--clr-steelBlue); padding: 15px 30px; outline: none; border: none; border-radius: 5px; background: var(--clr-white); cursor: pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); pointer-events: auto; } .startBtn:focus{ background-color: var(--clr-steelBlue); color:var(--clr-white); outline: var(--clr-steelBlue); } .showInfoBox.info_box{ display: flex; } /* INFO BOX*/ .info_box { height:100vh; display: flex; justify-content:center; align-items:center; display:none; }este es el javascript
const startbtn = document.querySelector(".start_btn"); const infoBox = document.querySelector(".info_box"); startbtn.addEventListener('click', function(){ startbtn.classList.remove("start_btn"); infoBox.classList.add("showInfoBox"); }) Revisé la herramienta de desarrolladores y es así. La clase start_btn no está allí, pero el botón que está dentro del div start_btn todavía está presente 
Intenté eliminar el botón por separado antes de eliminar el cuadro start_btn, pero no funciona. Intenté crear una clase separada para eliminar start_btn de esta manera, pero no funciona.
.hide.start_btn{ z-index:-1; pointer-events: none; }¿Qué puedo hacer para eliminar la clase start_btn? ¡¡Gracias!!
·
Juan Pablo Isaza
1 Respuestas
Responde la preguntaResponde la pregunta