Estoy intentando hacer una especie de buscaminas para que, cuando se pase el ratón sobre un div, cambie de color y elimine vidas hasta un total de 4 vidas. Paso cada clase por el bucle for, le doy un porcentaje de probabilidad para el cambio de color y las vidas y parece que funciona correctamente pero me sale en consola que no está definida la variable trozo[i] Llevo un tiempo dándole vueltas pero no consigo encontrar la solución. a ver si vosotros dais con la clave. Muchas gracias!! ¿Sabéis por qué puede ser esto? <!DOCTYPE html> <html lang="en"> <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"> <style> #bloque{ margin: 2% auto; } .linea{ display: flex; justify-content: center; } .cuadro{ width: 50px; height: 50px; margin: 0.2%; display: flex; background-color: grey; border: solid 1px black; border-radius: 2%; } h3{ text-align: center; } #par{ text-align: center; font-size: 22px; } </style> <title>Document</title> </head> <body> <h3>Debe pasar de arriba hacia abajo sin tocar más de 3 minas</h3> <div id="bloque"> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> <div class="linea"> <div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div><div class="cuadro"></div> </div> </div> <p id="par">Tiene un total de 3 vidas</p> <script> var trozo = document.getElementsByClassName("cuadro"); var parr = document.getElementById("par"); var vidas = 3; for(i = 0; i <= trozo.length; i++){ trozo[i].addEventListener('mouseover', function(){ var num = Math.round(Math.random()*(99)+1); if(num < 20){ this.style.backgroundColor = "red"; vidas--; par.textContent = `Le queda un total de ${vidas} vidas`; }else{ this.style.backgroundColor = "green"; } if(vidas == 0){ alert("Se le han acabado las vidas"); location.reload(); } }); } </script> </body> </html> Mil gracias