El navegador no me reconoce el evento click! Al abrir la cosola no obtengo ningun dato cuando hago click…Alguien sabe que puede ser? Esto...

Mauricio Ludueña

Pregunta

student•hace 5 años

El navegador no me reconoce el evento click! Al abrir la cosola no obtengo ningun dato cuando hago click…Alguien sabe que puede ser? Estoy usando mozilla

Gracias !!

Jairo Ramirez Castaño

student•hace 4 años

Hola Mauricio, revise tu código y encontré que la función que debe llamar a los eventos click this.agregarEventos() no se esta llamando.

Intenta que te quede de esta forma:

siguienteNivel(){
      this.iluminarSecuencia()
      this.agregarEventosClick()
    }

Adicional a eso, no estas escuchando el evento listener para el Naranja:

this.colores.naranja.addEventListener(`click`, this.elegirColor)

Revisalo y me dices como te va

Javier Sanguino Espaa

student•hace 4 años

hola!!! tengo el mismo problema, he intentado de todo y aun no funciona

Alberto Castro Flores

student•hace 5 años

pudiste resolverlo?

Mauricio Ludueña

student•hace 5 años

Hola John! Gracias por las correcciones. Ya arreglé las comillas, y eliminé la función vacía. Sin embargo el tema del evento click sigue sin reportar nada en la consola..Voy a seguir investigando que puede ser... Gracias !!

John Cardenas

student•hace 5 años

PD: Luego de la función:

siguienteNivel() {
 this.iluminarSecuencia()
}

Tienes una función llamada

agregarEventosClick()

vacía. Y luego más abajo la estás creando otra vez pero esta vez con los eventos. Deberías borrar la que está vacía.

Un saludo Mauricio ;)

John Cardenas

student•hace 5 años

Puede que el problema esté en el tipo de comillas que estás usando. Estas usando comillas invertidas `` y debes usar comillas simples ' ' Lo tienes acá:

const celeste = document.getElementById(`celeste`)

Y en las demás líneas. Cambialo por esto:

const celeste = document.getElementById('celeste')

Mauricio Ludueña

student•hace 5 años

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Fonts -->
    <!-- Styles -->
    <!-- Title -->
    <title>Simon Dice</title>
  </head>
<!-- E S T I L O S -->
<style media="screen">

body  {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }
.gameboard {
              height: 100vh;
              width: 100vh;
              border-radius: 50%;
              overflow: hidden;
              margin: 0 auto;
              max-height: 60vh;
              max-width: 60vh;
            }
.color {
                  width: 50%;
                  height: 50%;
                  display: inline-block;
                }

.left {
                  float: left;
                }

.right {
                  float: left;
                }

.celeste {
                  background: #22a6b3;
                }

.celeste.light {
                  background: #7ed6df;
                }

.violeta {
                  background: #be2edd;
                }

.violeta.light {
                  background: #e056fd;
                }

.naranja {
                  background: #f0932b;
                }

.naranja.light {
                  background: #ffbe76;
                }

.verde {
                  background: #6ab04c;
                }

.verde.light {
                  background: #badc58;
                }

.btn-start {
                  width: 400px;
                  height: 100px;
                  background: #ecf0f1;
                  color: #2c3e50;
                  font-size: 2.5rem;
                  position: absolute;
                  top: calc(50% - 50px);
                  left: calc(50% - 200px);
                }

.hide {
    display: none;
}
</style>



<!-- C U E R P O  D E   P A G I N A -->
  <body>
<!-- H E A D E R -->
<!-- P R I N C I P A L -->
<div class="gameboard">
  <div class="color celeste left" id="celeste" data-color="celeste"></div>
  <div class="color violeta right" id="violeta" data-color="violeta"></div>
  <div class="color naranja left" id="naranja" data-color="naranja"></div>
  <div class="color verde right" id="verde" data-color="verde"></div>
  <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar</button>
</div>

<!-- J A V A  S C R I P T -->
<script>
const celeste = document.getElementById(`celeste`)
const violeta = document.getElementById(`violeta`)
const naranja = document.getElementById(`naranja`)
const verde = document.getElementById(`verde`)


const btnEmpezar = document.getElementById(`btnEmpezar`)



class Juego {
  constructor() {
    this.inicializar()
    this.generarSecuencia()
    this.siguienteNivel()
  }
    inicializar(){
      btnEmpezar.classList.add(`hide`)
      this.nivel = 2
      this.colores = {
        celeste,
        violeta,
        naranja,
        verde
      }
    }

    generarSecuencia() {
      this.secuencia = new Array(10).fill(0).map(n=> Math.floor(Math.random() * 4))
    }
    siguienteNivel(){
      this.iluminarSecuencia()
    }
    agregarEventosClick(){

    }

    transformarNumeroAColor(numero){
      switch (numero) {
        case 0:
          return `celeste`
        case 1:
          return `violeta`
        case 2:
          return `naranja`
        case 3:
          return `verde`
          }
    }

    iluminarSecuencia(){
      for (let i = 0; i < this.nivel; i++){
        const COLOR = this.transformarNumeroAColor(this.secuencia[i])
        setTimeout(() => this.iluminarColor(COLOR), 1000 * i)
      }
    }

    iluminarColor(COLOR){
      this.colores[COLOR].classList.add(`light`)
      setTimeout(()=> this.apagarColor(COLOR), 350)
      }

      apagarColor(COLOR) {
        this.colores[COLOR].classList.remove(`light`)
      }

      agregarEventosClick(){
        this.colores.celeste.addEventListener(`click`, this.elegirColor)
        this.colores.verde.addEventListener(`click`, this.elegirColor)
        this.colores.violeta.addEventListener(`click`, this.elegirColor)
        this.colores.verde.addEventListener(`click`, this.elegirColor)

      }

      elegirColor(ev){
        console.log(this)
      }
}

function empezarJuego() {
  window.juego = new Juego()
}

</script>
<!-- F O O T E R -->
  </body>
</html>

Kevin J. Zea Alvarado

student•hace 5 años

Comparte tu código para ver cuál podría ser el problema. O intenta antes con Chrome u otro navegador. A ver qué pasa.

El navegador no me reconoce el evento click! Al abrir la cosola no obtengo ningun dato cuando hago click…Alguien sabe que puede ser? Esto...

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018