I have this code, when I run it the first time it works perfectly, but when I run it several times, it's like it won't let me click some spaces, I don't know if it's something from the cache or if there is another reason and I have no idea how to fix it .
The program works fine, but as I tell you when I run it again, it doesn't work perfectly.
let palabras = [
"caballos", "iguales", "caminante", "queso"
];
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Juego del ahorcado</title>
<style>
.letras {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; margin: 5px; padding:5px; color: #F00; background-color: #0fc; font-family: 'Courier New', Courier, monospace;
}
.blancos { position: absolute; left: 0px; top: 0px; border:none; margin: 5px; padding: 5px; color: #006; background-color: white; font-family: 'Courier New', Courier, monospace;text-decoration: underline; color: black; font-size: 24 px;
}
</style>
<script src="palabras.js" defer></script>
<script type="text/javascript">
let ctx;
let construirelemento;
let alfabeto = "abcdefghijklmnñopqrstuvwxyz";
let alfabetoy = 300;
let alfabetox = 20;
let alfabetoancho = 25;
let secreto;
let letrasacertadas = 0;
let secretox = 160;
let secretoy =50;
let secretoancho = 50;
let colorhorca = "brown";
let colorcara ="tan";
let colorcuerpo ="tan";
let colornudo ="#F60";
let centrocuerpox = 70;
let pasos = [
dibujarsoga,
dibujarcabeza,
dibujarcuerpo,
dibujarbrazoderecho,
dibujarbrazoizquierdo,
dibujarpiernaderecha,
dibujarpiernaizquierda,
dibujarlazo
];
let actual = 0;
function dibujarsoga (){
ctx.lineWidth = 8;
ctx.strokeStyle = colorhorca;
ctx.beginPath();
ctx.moveTo (2,180);
ctx.lineTo (40,180);
ctx.moveTo (20,180);
ctx.lineTo(20,40);
ctx.moveTo (2,40);
ctx.lineTo (80,40);
ctx.stroke();
ctx.closePath();
}
function dibujarcabeza (){
ctx.lineWidth = 3;
ctx.strokeStyle = colorcara;
ctx.save(); //before scaling of circle to be oval
ctx.scale (.6,1);
ctx.beginPath ();
ctx. arc (centrocuerpox /.6,80,10,0,Math.PI*2, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function dibujarcuerpo (){
ctx.strokeStyle = colorcuerpo;
ctx.beginPath ();
ctx.moveTo (centrocuerpox, 90);
ctx.lineTo (centrocuerpox, 125);
ctx.stroke();
ctx.closePath();
}
function dibujarbrazoderecho (){
ctx.beginPath ();
ctx.moveTo (centrocuerpox, 100);
ctx.lineTo (centrocuerpox+20, 110);
ctx.stroke();
ctx.closePath();
}
function dibujarbrazoizquierdo (){
ctx.beginPath ();
ctx.moveTo (centrocuerpox, 100);
ctx.lineTo (centrocuerpox-20, 110);
ctx.stroke();
ctx.closePath();
}
function dibujarpiernaderecha (){
ctx.beginPath ();
ctx.moveTo (centrocuerpox, 125);
ctx.lineTo (centrocuerpox+10, 155);
ctx.stroke();
ctx.closePath();
}
function dibujarpiernaizquierda (){
ctx.beginPath ();
ctx.moveTo (centrocuerpox, 125);
ctx.lineTo (centrocuerpox-10, 155);
ctx.stroke();
ctx.closePath();
}
function dibujarlazo (){
ctx.strokeStyle =colornudo;
ctx.beginPath ();
ctx.moveTo (centrocuerpox-10, 40);
ctx.lineTo (centrocuerpox-5, 95);
ctx.stroke();
ctx.closePath();
ctx.save();
ctx.scale (1,.3);
ctx.beginPath();
ctx.arc (centrocuerpox, 95/.3,8,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
ctx.restore();
dibujarcuello();
dibujarcabeza();
}
function dibujarcuello () {
ctx.strokeStyle = colorcuerpo;
ctx.beginPath();
ctx.moveTo (centrocuerpox, 90);
ctx.lineTo (centrocuerpox, 95);
ctx.stroke();
ctx.closePath();
}
function init () {
ctx = document.getElementById('canvas').getContext ('2d');
configurarjuego ();
ctx.font ="bold 20pt Ariel";
}
function configurarjuego (){
let i;
let x;
let y;
let idunica;
let an = alfabeto.length;
for (i=0; i<an; i++) {
idunica = "a"+String(i);
d = document.createElement('alfabeto');
d.innerHTML = (
"<div class = 'letras' id = '"+idunica+"'>"+alfabeto[i]+"</div>");
document.body.appendChild(d);
construirelemento = document.getElementById(idunica);
x =alfabetox + alfabetoancho*i;
y = alfabetoy;
construirelemento.style.top = String(y)+"px";
construirelemento.style.left = String(x)+"px";
construirelemento.addEventListener ('click', elementoelegido, false);
}
let elec = Math.floor (Math.random() * palabras.length);
secreto = palabras[elec];
for (i=0; i<secreto.length;i++){
idunica = "s"+String(i);
d = document.createElement('secreto');
d.innerHTML = (
"<div class ='blancos' id = '"+idunica+"'> __ </div>");
document.body.appendChild(d);
construirelemento = document.getElementById(idunica);
x= secretox + secretoancho*i;
y = secretoy;
construirelemento.style.top = String(y)+"px";
construirelemento.style.left = String(x)+"px";
}
pasos [actual]();
actual++;
return false;
}
function elementoelegido(ev) {
let not = true;
let elegido = this.textContent;
let i;
let j;
let idunica;
let construirelemento;
let out;
for (i=0; i<secreto.length; i++)
{
if (elegido ==secreto[i]){
id ="s"+String(i);
document.getElementById(id).textContent = elegido;
not = false;
letrasacertadas++;
if (letrasacertadas ==secreto.length)
{
ctx.fillStyle = colorhorca;
out ="¡Has ganado!";
ctx.fillText (out,200,80);
ctx.fillText ("Recarga la página para jugar de nuevo.", 200,120);
for (j=0; j<alfabeto.length;j++){
idunica = "a"+String(j);
construirelemento = document.getElementById(idunica);
construirelemento.removeEventListener('click', elementoelegido, false);
}
}
}
}
if (not) {
pasos[actual]();
actual++;
if (actual>=pasos.length)
{
for (i=0;i <secreto.length; i++){
id = "s"+String(i);
document.getElementById(id).textContent = secreto[i];
}
ctx.fillStyle = colorhorca;
out = "¡Has perdido!";
ctx.fillText (out, 200,80);
ctx.fillText ("Recarga la página para jugar de nuevo.", 200,120);
for (j=0; j<alfabeto.length; j++){
idunica = "a"+String(j);
construirelemento = document.getElementById(idunica);
construirelemento.removeEventListener('click', elementoelegido, false);
}
}
}
let id = this.id;
document.getElementById(id).style.display = "none";
}
</script>
</head>
<body onload="init ();">
<h1>Colgado</h1></br>
<p>
<canvas id="canvas" width="700" height="400">
Tu navegador no soporta el elemento canvas de HTML5.
</canvas>
</br>
</p>
</body>
</head>
</html>
Your problem is in this line:
The variable
id
is not defined. You need to declare the variable like this:It would look like this:
tu error es el ambito de las variables utilizas
id
mas de 1 vez pero haces referencia a la mas global ya que en ambitos mas bajos no utlizaslet
por lo que buscara fuera del scope si esta esta declarada y tomara el valor de la misma y no la definida en sus propio escope! quedaria asi