Tengo un bucle infinito que se ejecuta cada segundo, el problema es, en la primera ejecución, siempre da un pequeño fallo, y después continúa sin problemas.
Pongo el ejemplo:
window.addEventListener('load', ()=>{
document.querySelector('.magic').addEventListener('click', ()=>{
startGame();
})
});
function startGame(){
//obtenemos un length
let lng = document.querySelectorAll('.cont').length - 1
//elegimos aleatoriamente un número entre 0 y el lenght
let rng = randomNumber(lng);
//obtenemos el cuadrado que queremos
let dvc = getDivColored(rng);
if(dvc.style.backgroundColor == dvc.getAttribute('data')){
dvc.style.backgroundColor = 'white';
console.log(dvc);
}
else{
dvc.style.backgroundColor = dvc.getAttribute('data');
console.log(dvc);
}
setTimeout(startGame, 1000);
}
function randomNumber(lng){
return Math.floor(Math.random() * Math.floor(lng));
}
function getDivColored(rng){
return document.querySelectorAll('.cont')[rng];
}
.cont{
width:50px;
height:50px;
border:1px solid #000;
margin:0 15px;
display: inline-block;
float: left;
}
.red{
background: red;
}
.blu{
background: blue;
}
.yel{
background: yellow;
}
.gre{
background: green;
}
.pur{
background: purple;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>013 : paleta</title>
<link rel="stylesheet" type="text/css" href="css/013.css">
<script src="js/013.js"></script>
</head>
<body>
<div class="plt">
<div class="red cont" data="red"></div>
<div class="blu cont" data="blue"></div>
<div class="yel cont" data="yellow"></div>
<div class="gre cont" data="green"></div>
<div class="pur cont" data="purple"></div>
</div>
<button type="button" class="magic">MAGIA</button>
</body>
</html>
Las primeras veces que activa aleatoriamente uno de los div, no se apaga, sin embargo, una vez los vuelve a llamar, si.
He probado a hacer el caso contrario:
if(dvc.style.backgroundColor != dvc.getAttribute('data')){
dvc.style.backgroundColor = dvc.getAttribute('data');
console.log(dvc);
}
else{
dvc.style.backgroundColor = 'white';
console.log(dvc);
}
Añadiendo un != para comprobar que NO sean iguales, y por ende, ejecute lo que le mando. Pero igualmente, hace que se apaguen una vez, y le cueste dos intentos volver a encenderse.
(Apagar en este caso lo llamo a ponerlo en blanco)
¿Qué es lo que tengo mal?
length
porquerandomNumber(lng)
nunca va a devolver lng.Math.random()
nunca retorna 1, puede retornar 0 o cualquier número mayor a 0 y menor a 1..cont
, y los enumero, el cont[1] sería el primero, es por eso que restaba uno. Entiendo que multiplicar por 0 o muy cerca, de 0, pero, y el 5? no hay.cont[5]