How To Add A Class On A Div?

I have some code to display a sequence of images. After the sequence completes (the last image of the sequence has appeared), I wish to toggle a class .d-block onto the div with th

Solution 1:

You can use document.getElementsByClassName to toggle class after clearInterval. Check updated snippet below...

onload = functionstartAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 0;
    var interval = setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        j++;
        if(j === 14) {
            clearInterval(interval);
            document.getElementsByClassName("d-none")[0].classList.add('d-block');
            document.getElementsByClassName("d-none")[0].classList.remove('d-none');
        }
    },100); 
}

#animationimg {
    display: none;
}
#animationimg:first-child {
    display: block;
}
.d-none{
display:none
}
.d-block{
display:block;
}

<divid="animation"><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" /></div><divclass="d-none">
this div is aappear
</div>

Solution 2:

You can Change css :

onload = functionstartAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 0;
    var interval = setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        j++;
        if(j === 14) {
            clearInterval(interval);
            document.getElementsByClassName("d-none")[0].style.display = "block";
        }
    },100); 
}

#animationimg {
    display: none;
}
#animationimg:first-child {
    display: block;
}
.d-none{
display:none
}
.d-block{
display:block;

<divid="animation"><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" /><imgsrc="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" /></div><divclass="d-none">
    This should appear once the sequence is completed!
</div>

this not need to another class