Tengo un problema con mi código y es que el addEventListener no funciona al hacer click en una de las partes del círculo. Alguien me podr...

Pregunta de la clase:
Obteniendo el input del usuario
Rubén Dario

Rubén Dario

Pregunta
studenthace 5 años

Tengo un problema con mi código y es que el addEventListener no funciona al hacer click en una de las partes del círculo. Alguien me podría explica a que se deba? Investigué un poco sobre la razón y me dijieron que es porque hay un valor nulo…

const celeste = document.getElementById('celeste'); const violeta = document.getElementById('violeta'); const naranja = document.getElementById('naranja'); const verde = document.getElementById('verde'); const btnEmpezar = document.getElementById('botoncito'); class Juego { constructor() { this.inicializar(); this.generarSecuencia(); this.siguienteNivel(); } inicializar() { btnEmpezar.classList.add('hide'); this.level = 1; this.colores = { celeste, violeta, naranja, verde, } } generarSecuencia() { this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4)); } siguienteNivel() { this.iluminarSecuencia(); } 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.level; i++) { let 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,false) this.colores.violeta.addEventListener("click", this.elegirColor,false) this.colores.naranja.addEventListener("click", this.elegirColor,false) this.colores.verde.addEventListener("click", this.elegirColor,false) } elegirColor(ev) { alert('hola') } } const empezarJuego = () => window.juego = new Juego();
2 respuestas
para escribir tu comentario
    Deivi Alfredo Arocutipa Serrano

    Deivi Alfredo Arocutipa Serrano

    studenthace 5 años

    no te funciona por que no inicializas en ningun lugar el evento siguienteNivel() { this.iluminarSecuencia() this.agregarEventosClick() }

    Aldo Said Salas Rodríguez

    Aldo Said Salas Rodríguez

    studenthace 5 años

    Prueba poniendo click en comillas simples.

    'click'
Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

JavaScript es un lenguaje de programación que se trabaja desde el navegador. Construye programas, conoce el entorno, los condicionales y las estructuras repetitivas. Aprende cuáles son y cómo se declaran las variables y las funciones de JS.

Fundamentos de JavaScript 2018
Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018

JavaScript es un lenguaje de programación que se trabaja desde el navegador. Construye programas, conoce el entorno, los condicionales y las estructuras repetitivas. Aprende cuáles son y cómo se declaran las variables y las funciones de JS.