1

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: introducir la descripción de la imagen aquí 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

1 respuesta 1

1

Que tal Victoria? te dejo por aca un par de recomendaciones y la solucion. Desde ya, muy buena estetica tiene la pagina😊

1 - nunca te esta entrando en el condicional if, siempre en el else de showCategories()

2 - showCategories() tiene un nombre que referencia a mostrar categorias, las cuales ya se muestran con la salida de fadeOutInicial. Por ende no hace falta esta funcion.

3 - Siempre que diferencies a un elemento unico es mejor que sea por id (mas adelante al interactuar con bases de datos, detectaras la importancia de id).

4 - si no entiendes el switch case, lo veras cuando aprendas condicionales (en vez de hacer varios if preguntando cada caso, se aplica dicha funcion)

5 - se le agrega el onclick en html si estas haciendo este tipo de paginas (luego cuando uses librerias o frameworks te ahorraras muchas de estas cuestiones)

HTML

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")
}

function categorySelected(x){
    console.log(botonUCM.classList)
    switch (x) {
        case 1:
            botonXMEN.classList.toggle('fadeOut');
            botonTODO.classList.toggle('fadeOut');
            break;
    
        case 2:
            botonUCM.classList.toggle('fadeOut');
            botonTODO.classList.toggle('fadeOut');
            break;
    
        case 3:
            botonUCM.classList.toggle('fadeOut');
            botonXMEN.classList.toggle('fadeOut');
            break;
    
        default:
            break;
    }
}
.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%;    
}

.buttonSelected:hover {
    border-color: #060052;
    background-color: rgb(38, 0, 255);
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>problem1</title>
    <link rel="stylesheet" href="./styles.css" />    
  </head>
  <body>
    <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" id="botonUCM" onclick="categorySelected(1)">MCU</button>
          <button class="categorias__boton" id="botonXMEN" onclick="categorySelected(2)">X-Men</button>
          <button class="categorias__boton" id="botonTODO" onclick="categorySelected(3)">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>

    <script src="./index.js"></script>
  </body>
</html>

3
  • Muchisimas gracias por la respuesta Samuel!!!
    – vic
    el 14 abr. 2022 a las 21:37
  • Si manejo switch! Pero no se me habia ocurrido. Crack
    – vic
    el 14 abr. 2022 a las 21:41
  • Como podria tener todo en Js? Intenté esto pero no funcionó 😅 for (let i = 0; i < arrBotones.length; i++) { arrBotones[i].addEventListener("click", categorySelected(arrBotones[i])) }
    – vic
    el 14 abr. 2022 a las 22:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.