Por alguna razon me da un error que dice “TypeError: this.colores[color] is null” <code> const celeste = document.getElementById('celeste...

Juan Pablo Ferro Arroyo

Juan Pablo Ferro Arroyo

Pregunta
studenthace 6 años

Por alguna razon me da un error que dice “TypeError: this.colores[color] is null”

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 = 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.nivel; 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') } } function empezarJuego() { window.juego = new Juego() }
2 respuestas
para escribir tu comentario
    Sebastián Riátiga

    Sebastián Riátiga

    studenthace 6 años

    Hola, jpferroa96.

    Según lo que vi en tu código, los errores que me aparecieron fueron debido a que te faltaron los espacios entre case y el número en el método de switch (ej: case 0). También, en la parte del array te faltó un espacio en new Array. Y, dentro del ciclo for, otro entre let color. Te dejo tu código corregido ;):

    Pd: recuerda que, según la explicación de Sacha, es mejor, para este caso, el uso de const en lugar de let (const color).

    class Juego { constructor() { this.inicializar() this.generarSecuencia() this.siguienteNivel() } inicializar() { btnEmpezar.classList.add('hide') this.nivel = 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.nivel; 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') } } function empezarJuego(){ window.juego = new Juego();
    Massimo Di Berardino

    Massimo Di Berardino

    studenthace 6 años

    Hola jpferroa96, esto se debe a que cuando en el HTML estás llamando a iluminarColor o apagarColor el this en ese momento en window, dicho de otra manera this es la instancia de un objeto en un bloque de codigo, por eso cuando tú llamas a alguna de estas funciones el objeto instancia do en el DOM es window, si esto no te queda claro haz esto, dentro de alguna de estas funciones haz un consolé.log(this) y nada mas, luego corre tu programa y abre la consoló ahí verás que te vuelve this y entenderás mejor de lo que hablo, ahora te dejo la solución sólo debes atar a estar funciones el this o sea indicarles que su this va a ser esa clase esto lo haces en el método constructor

    constructor() { this.inicializar() this.generarSecuencia() this.siguienteNivel() this.iluminarColor = this.iluminarColor.bind(this); this.apagarColor = this.apagarColor.bind(this); }
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.