Skip to main content
2 de 2
adicionou 1593 caracteres ao conteúdo

Acessar array de itens criados dinamicamente

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>