Tengo dos archivos, 1 html y 1 javascript. Estoy tratando de agregar una función de racha, de modo que cuando una respuesta se adivina correctamente, la racha aumenta en 1 si una pregunta se adivina incorrectamente, el contador vuelve a 0. Intenté agregar un div en el archivo html y traté de llamarlo en otro archivo javascript obteniendo el documento por ID y luego escribiendo una función de contador simple, pero parece que no funciona.
El siguiente código es donde quiero agregar mi contador. Así que en el último retorno "¡Buen trabajo! ¡Adivinaste la palabra!" ahí es donde el contador debería comenzar a contar y mostrarse en un div/span/p en el archivo html. ¿Alguna sugerencia?
Tenga en cuenta que la var está destinada a ser racha/contador en lugar de clics
get statusMessage(){ var streak=0; if (this.status === 'playing'){ return `Guesses left: ${this.remainingGuesses}` } else if (this.status === 'failed') { streak=0; document.getElementById("streak").innerHTML = streak; return `Nice try! The word was "${this.word.join('')}" ` } else { return 'Great work! You guessed the word!' streak += 1; document.getElementById("streak").innerHTML = streak; } }Así que no sé si es la mejor manera de agregar un contador como este, pero raya.innerHTML = 0 establece el div en 0 y raya.innerHTML ++ agrega 1 cada vez que la respuesta se adivina correctamente.
get statusMessage() { if (this.status === 'playing'){ return `Nice try! The word was "${this.word.join('')}"` return `Guesses left: ${this.remainingGuesses}` } else if (this.status === 'failed') { streak.innerHTML = 0 return `Nice try! The word was "${this.word.join('')}"``` } else { streak.innerHTML ++ return 'Great work! You guessed the word!' } }Cuando return , el siguiente código no se ejecutará.
Así que en el siguiente fragmento
else { return 'Great work! You guessed the word!' streak += 1; document.getElementById("streak").innerHTML = streak; } la streak +=1 y la manipulación del documento no se ejecutarán.
Simplemente mueva el return después del código que desea ejecutar.
else { streak += 1; document.getElementById("streak").innerHTML = streak; return 'Great work! You guessed the word!' } Por supuesto, también deberá colocar la variable de streak en algún lugar donde no se restablezca en cada llamada del método statusMessage . Tal vez definirlo en la clase de juego.
Porque tienes una var streak=0; dentro de la función, cada vez que se llama, la variable vuelve a 0. Debe moverla fuera de la función. También regresa antes de incrementar la variable de racha, así que mueva esa línea hacia abajo.
Como esto:
var streak = 0; get statusMessage() { if (this.status === 'playing'){ return `Guesses left: ${this.remainingGuesses}` } else if (this.status === 'failed') { streak=0; document.getElementById("streak").innerHTML = streak; return `Nice try! The word was "${this.word.join('')}" } else { streak++; document.getElementById("streak").innerHTML = streak; return 'Great work! You guessed the word!' } } También puedes usar streak++; para incrementar una variable en 1.