0

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>

2
  • o 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
    – novic
    Commented 25/02/2020 às 23:26
  • poste o código completo
    – novic
    Commented 25/02/2020 às 23:48

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .