HTML BODY PART
<body>
<div class="main">
<img class="red" src="red.png" alt="">
<img class="blue" src="blue.png" alt="">
<img class="green" src="green.png" alt="">
<img class="yellow" src="yellow.png" alt="">
<div class="btn">
<button class="play">Play</button>
<button class="restart">Restart</button>
</div>
</div>
</body>
</html>
JS PART
const play=document.querySelector(".play")
const restart=document.querySelector(".restart")
let items=['red','blue','green','yellow']
let sequence=[]
let generateRandomSequence=()=>{
let count=Math.trunc(Math.random()*4)
sequence.push(items[count])
console.log(sequence)
}
let makeColorBright=async (array)=>{
let second=()=>{
for(item of array){
console.log(item)
document.querySelector(`.${item}`).style.filter="brightness(2)"
setTimeout(()=>{
document.querySelector(`.${item}`).style.filter="brightness(1)"
},2000)
}
}
return second()
}
play.addEventListener("click",async function(){
generateRandomSequence()
await makeColorBright(sequence)
})
So the generateRandomSequence() function is working fine , and it adds random items in sequence everytime when I press play . My goal was to initially just see if I can make random blocks light up for which I've used sequence array. Now makeColorBright() will take inputs from sequence and the goal is to make a color light up and then wait 2 secs before it lights down , and then move onto next color. But the issue is it works fine for only one element in Sequence array. When there are 2 or more elements in sequence , all the colors light up simultaneously , but only the last element lights down after 2 secs.
You can change for(item of array){ to for (let item of array) { to narrow the scope of the item variable. However, even after fixing that, I don't think the script will work as expected since you call setTimeout in succession, without waiting.
There are a few ways to fix. Here's one that creates a timeout function using Promises.
(Note: I changed the images to divs and brightness to opacity to facilitate creating a code snippet).
const play = document.querySelector(".play");
const restart = document.querySelector(".restart");
let items = ['red', 'blue', 'green', 'yellow'];
let sequence = [];
let generateRandomSequence = () => {
let count = Math.trunc(Math.random() * 4);
sequence.push(items[count]);
}
// Sleep function
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
async function makeColorBright(array) {
for (let color of array) {
await wait(500)
.then(() => document.querySelector(`.${color}`).style.opacity = 1);
await wait(1500)
.then(() => document.querySelector(`.${color}`).style.opacity = .2);
}
}
play.addEventListener("click", async function() {
generateRandomSequence();
makeColorBright(sequence);
}).box {
width: 50px;
height: 50px;
display: inline-block;
opacity: .2;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}<div class="main">
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>
<div class="box yellow"></div>
<div class="btn">
<button class="play">Play</button>
<button class="restart">Restart</button>
</div>
</div>I haven't used await/async very much, Johnny's answer may be better than my solution, but it triggers your lights in a timed succession like you wanted. You had a timeout on turning the lights off, but not when they turn on.
const play=document.querySelector(".play")
const restart=document.querySelector(".restart")
let items=['red','blue','green','yellow']
let sequence=[]
let generateRandomSequence=()=>{
let count=Math.trunc(Math.random()*4)
sequence.push(items[count])
console.log(sequence)
}
doThing = async(item, t)=>{
setTimeout(()=>{
document.querySelector(`.${item}`).style.filter="brightness(2)";
setTimeout(()=>{
document.querySelector(`.${item}`).style.filter="brightness(1)";
}, 1000);
}, t);
}
play.addEventListener("click",async function(){
generateRandomSequence()
let t = 0;
for(item of sequence){
doThing(item, t*1000);
t++;
}
})img{width:50px;height:50px}
.red{background:red;}
.blue{background:blue;}
.green{background:green}
.yellow{background:yellow}<div class="main">
<img class="red" src="red.png" alt="">
<img class="blue" src="blue.png" alt="">
<img class="green" src="green.png" alt="">
<img class="yellow" src="yellow.png" alt="">
<div class="btn">
<button class="play">Play</button>
<button class="restart">Restart</button>
</div>
</div>