me pasa que el codigo se me ejecuta dos veces al activar el evento y hace que el subnivel suba dos veces en un solo click

Jesus Enrique Esis Parra

Jesus Enrique Esis Parra

Pregunta
student
hace 5 años

me pasa que el codigo se me ejecuta dos veces al activar el evento y hace que el subnivel suba dos veces en un solo click

4 respuestas
    Patricio Villarroel Durán

    Patricio Villarroel Durán

    student
    hace 5 años

    ¡Hola Jesús!

    Si pudieras compartirnos una captura de pantalla o copiar y pegar tu código, de seguro te podremos ayudar.

    ¡Saludos!

    Jesus Enrique Esis Parra

    Jesus Enrique Esis Parra

    student
    hace 5 años
    const blue = document.getElementById('blue'); const yellow = document.getElementById('yellow'); const pink = document.getElementById('pink'); const orange = document.getElementById('orange'); const start = document.getElementById('start') class Game { constructor(){ this.init() this.newSecuence() this.nextLevel() } init(){ start.classList.add('hide') this.level = 1 this.maxlevel = 10 this.sublevel = 0 this.colores = { blue, yellow, pink, orange } } newSecuence(){ this.secuence = new Array(this.maxlevel).fill(0).map(n => Math.floor(Math.random() * 4)) console.log(this.secuence); } colorsSecuence(number){ switch(number){ case 0: return 'blue' case 1: return 'yellow' case 2: return 'pink' case 3: return 'orange' } } lightColor(color){ this.colores[color].classList.add('light') setTimeout(()=> this.turnOff(color), 350) } turnOff(color){ this.colores[color].classList.remove('light') } nextLevel(){ this.sublevel = 0 this.lightSecuence() this.eventHandlers() } lightSecuence(){ for(let i = 0; i < this.level; i++){ let color = this.colorsSecuence(this.secuence[i]) setTimeout(() => this.lightColor(color), 1000 * i) } } eventHandlers(){ this.colores.blue.addEventListener('click', this.chooseColor.bind(this)) this.colores.yellow.addEventListener('click', this.chooseColor.bind(this)) this.colores.pink.addEventListener('click', this.chooseColor.bind(this)) this.colores.orange.addEventListener('click', this.chooseColor.bind(this)) } chooseColor(e){ const colorName = e.target.dataset.color const colorNumber = this.colorToNumber(colorName) this.lightColor(colorName) if(colorNumber === this.secuence[this.sublevel]){ this.sublevel++ if(this.sublevel === this.level){ this.levelUp() console.log('siguiente') }else if (this.level === this.maxlevel) { alert('ganaste!') } }else{ console.log('perdiste'); } } levelUp(){ this.level++ setTimeout(() => this.nextLevel(), 1500) this.blockEventHandlers() } colorToNumber(color){ switch(color){ case 'blue': return 0 case 'yellow': return 1 case 'pink': return 2 case 'orange': return 3 } } blockEventHandlers(){ this.colores.blue.removeEventListener('click', this.chooseColor.bind(this)) this.colores.yellow.removeEventListener('click', this.chooseColor.bind(this)) this.colores.pink.removeEventListener('click', this.chooseColor.bind(this)) this.colores.orange.removeEventListener('click', this.chooseColor.bind(this)) } playAgain(){ this.level = 1 this.sublevel = 0 this.secuence = [] start.classList.remove('hide') this.blockEventHandlers() } } function startGame(){ let game = new Game() }```
    Juan David Vejarano Martinez

    Juan David Vejarano Martinez

    student
    hace 5 años

    Me pasa igual se me ejecuta 2 veces el evento de click cuando pongo un puto de interrupcion me llevaba al algo llamado mutations.forEach(function(mutation) y repetia de nuevo el evento del click, me di cuenta que es por esto this.colores.orange.addEventListener('click', this.chooseColor.bind(this)) en el video el pone el this.elegirColor = this.elegirColor.bind(this); en el método inicializar y así funciona, no tengo la explicación de por que funciona asi

    Jesus Enrique Esis Parra

    Jesus Enrique Esis Parra

    student
    hace 5 años

    gracias tenias razon ya lo solucione asi como dijiste

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.