I just need to change the method of array to sequently for start and stop timing. I need to be like this :
start"word1, "start"word2", start"word3", start"word4"
const timings = [
{ start: 0, stop: 1000 },
{ start: 1000, stop: 2000 },
{ start: 2000, stop: 5000 },
{ start: 5000, stop: 10000 }
]
const durations = timings.map(timing => timing.stop - timing.start
)
const container = document.body;
const childArray = [...container.children]; // To use array methods
childArray.forEach((el, i) => {
el.onclick = () => {
el.classList.toggle('highlight');
nextWord = childArray[i + 1];
if (!nextWord) return // Last word
setTimeout(() => {
el.classList.toggle('highlight');
nextWord.click();
}, durations[i])
}
}).highlight {
background-color: yellow;
}<!DOCTYPE html>
<html>
<body>
<span>word1</span>
<span>word2</span>
<span>word3</span>
<span>word4</span>
</body>
</html>