que tal? Estoy haciendo un juego de preguntas con el DOM y me encuentro trabada en una cosa:
Quiero que, cuando tocas uno de los tres botones, al seleccionado, se le aplique una clase, y a los otros dos, otra, para que desaparezcan.
Pero no se manejar los condicionales con el evento. Este codigo tiene recursividad, y está muy mal, pero es que no sabia como resolverlo.
El error que se presenta al ejecutarlo acá es el mismo que si lo corro en mi navegador:
Dejo aquí el link para probarlo en vivo: https://victoriaileanarodriguezmora.github.io/Marvell/
let botonJugas = document.querySelector(".jugas")
let titulo = document.querySelector("#titulo")
let secccionQuizz = document.querySelector(".quizz")
let divCategorias = document.querySelector(".categorias")
let contenedorPreguntas = document.querySelector(".contenedor__preguntas")
let botonesCategorias = document.querySelectorAll(".categorias > button")
let botonUCM = document.querySelector(".botonUCM")
let botonXMEN = document.querySelector(".botonXMEN")
let botonTODO = document.querySelector(".botonTODO")
contenedorPreguntas.classList.add("fadeOut")
divCategorias.classList.add("fadeOut")
// Se cliake el boton ¿JUGAS?
botonJugas.addEventListener("click", fadeOutInicial)
//Se oculta ese boton, y la presentacion del Inicio
function fadeOutInicial() {
botonJugas.classList.toggle("fadeOut")
titulo.classList.toggle("fadeOut")
// Se muestran las categorias para jugar
divCategorias.classList.toggle("fadeOut")
}
//Se muestran los 3 botones para elegir
function showCategories() {
for (let i = 0; i < botonesCategorias.length; i++) {
if (botonesCategorias[i].addEventListener("click", showCategories)) {
this.classList.toggle("categorias__boton")
this.classList.add("buttonSelected")
contenedorPreguntas.classList.toggle("fadeOut")
} else {
this.classList.toggle("fadeOut")
}
}
}
showCategories()
.fadeOut {
transition: 100ms;
display: none;
}
.displayNone {
display: none;
}
.fadeShow {
transition: 300ms;
opacity: 1;
visibility: visible;
}
.buttonSelected {
transition: 500ms;
font-size: 1rem;
padding: 0.7rem;
border: 5px solid rgb(38, 0, 255);
width: 6%;
border-radius: 44px;
position: fixed;
background-color: #060052;
color: white;
left: 1%;
top: 20%;
&:hover {
border-color: #060052;
background-color: rgb(38, 0, 255);
}
}
<main id="main">
<!-- titulo -->
<section id="titulo">
<h1 class="section__titulo">MARVEL QUIZZ</h1>
<p class="section__parrafo">
Luego de haber visto la guia (y las peliculas😉) , vas a ser tod@ un@ expert@ sobre Marvel. Y en este quizz vas a poder demostrarlo! <span class="section__span">El quizz es solo sobre Marvel Studios. Osea,
sólo las peliculas.</span>
</p>
</section>
<!-- titulo -->
<section class="quizz">
<button class="jugas">
¿JUGAS?
</button>
<div class="categorias">
<button class="categorias__boton botonUCM">MCU</button>
<button class="categorias__boton botonXMEN">X-Men</button>
<button class="categorias__boton botonTODO">TODO</button>
</div>
<div class="contenedor__preguntas">
<div class="div__pregunta">
<h2 class="pregunta__titulo">¿Por quien consigue Clint la gema del Alma?</h2>
<img src="">
<button class="pregunta__opcion">Viuda Negra </button>
<button class="pregunta__opcion">Bruja Escarlata</button>
<button class="pregunta__opcion">Gamora</button>
<button class="pregunta__opcion">Carol Danvers</button>
</div>
<div class="div__pregunta">
<h2 class="pregunta__titulo">¿Qué personajes tiene un premio por intrepretar en live action más veces a un superhéroe de marvel?</h2>
<img src="">
<button class="pregunta__opcion">Hugh JackMan & Patrick Stewart</button>
<button class="pregunta__opcion">Hugh Jackman & Robert D. Junior</button>
<button class="pregunta__opcion">Patrick Stewart & Robert D. Junior</button>
</div>
<div class="div__pregunta">
<h2 class="pregunta__titulo">Que raza es aliada de Loki en Avengers?</h2>
<img src="">
<button class="pregunta__opcion">Chitauri</button>
<button class="pregunta__opcion">Klyntar</button>
<button class="pregunta__opcion">Kronans</button>
<button class="pregunta__opcion">Centaurians</button>
</div>
</div>
</section>
</main>
https://victoriaileanarodriguezmora.github.io/Marvell/html/quizz.html este es link directo al quizz