I'm trying to make a kind of minesweeper so that when you hover over a div it will change color and remove lives up to a total of 4 lives.
I pass each class through the for loop, I give it a percentage of probability for the color change and the lives and it seems to work correctly but I get in the console that the variable piece[i] is not defined
I've been thinking about it for a while but I can't find the solution. Let's see if you find the key.
Thank you very much!!
Do you know why this could be?
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();
}
});
}
#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;
}
<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>
Thank you
It must be giving you that error in the last iteration of the loop because you have set i <= size as a stop condition. I think that error will disappear if you modify it by:
However, the behavior of the code will not change, you will only get that error, which is a good practice to remove it to avoid problems in the future.