Tenho um cronometro que adiciona imagens a cada "X" segundos e cada imagem eh inserida em um array. Quero que a cada 4 imagens (array[3]) o cronometro pause e emita um alerta
function addImg() {
const image = document.createElement('img');
image.src = 'mush.png';
document.getElementById('mushs').appendChild(image);
imgList.push(image);
}
As imagens estao sendo criadas e inseridas corretamente no array conforme o cronometro, a condicional abaixo nao funciona
if (imgList.length == 3){
pause();
alert("TAKE A BREAK!");
}
var ms = 0,s = 0,m = 0;
var timer;
var stopwatchEl = document.querySelector('.stopwatch');
var lapsContainer = document.querySelector('.laps');
var imgList = [];
function start() {
if(!timer){
timer = setInterval(run, 10);
}
}
function run(){
stopwatchEl.textContent = (m < 10 ? "0" + m:m) +":" + (s <10 ? "0"+s:s) +":"+ (ms < 10 ? "0"+ms:ms);
ms++;
if (ms==100){
ms = 0;
s++;
}
if (s ==60){
s=0;
m++;
}
if (s % 2 === 0 && ms ===00){
let brk = document.createElement("p");
brk.innerText = "Take a break!";
lapsContainer.appendChild(brk);
addImg();
pause();
start();
}
}
function addImg() {
const image = document.createElement('img');
image.src = 'mush.png';
document.getElementById('mushs').appendChild(image);
imgList.push(image);
}
function pause(){
clearInterval(timer);
timer=false;
}
function stop(){
clearInterval(timer);
timer=false;
ms=0;
s=0;
m=0;
stopwatchEl.textContent = (m < 10 ? "0" + m:m) +":" + (s <10 ? "0"+s:s) +":"+ (ms < 10 ? "0"+ms:ms);
}
function restart(){
stop();
start();
}
function lap(){
if(timer){
var li = document.createElement("li");
li.innerText = (m < 10 ? "0" + m:m) +":" + (s <10 ? "0"+s:s) +":"+ (ms < 10 ? "0"+ms:ms);
lapsContainer.appendChild(li);
}
}
function resetLaps(){
lapsContainer.innerHTML = "";
}
if (imgList.length == 3){
pause();
alert("TAKE A BREAK!");
}
```HTML
<div class="controls">
<button onclick="start()">Start</button>
<button onclick="pause()">Pause</button>
<button onclick="stop()">Stop</button>
<button onclick="restart()">Restart</button>
<button onclick="lap()">Lap</button>
<button onclick="resetLaps()">Reset Laps</button>
<button onclick="addImg()">Add Image</button>
</div>
<div class="stopwatch">00:00:00</div>
<ul class="laps"></ul>
<div class="toad" id="mushs"></div>
length
tem que ser igual a 4 para inicio de conversar, a posição que é começar por zero também conta como tamanho. é bom sempre montar um exemplo minimo