JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<img id='animation' src ='http://i51.tinypic.com/sxheeo.gif'/>

<div id='counter'>0</div>

<button id='start'>START</button>

JavaScript

var urls;

function animate(pos) {
    pos %= urls.length;
    var animation = document.getElementById('animation');
    var counter = document.getElementById('counter');
    animation.src = urls[pos];
    if (pos == 0) { // only make onclick when have a certain image
        animation.onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
    }
    else {
        animation.onclick = function() {
            //do nothing
        }
    }
    setTimeout(function() {
        animate(++pos);
    }, 500);
}

window.onload = function() {
    urls = new Array("http://i56.tinypic.com/2i3tyw.gif", "http://i51.tinypic.com/sxheeo.gif");
    document.getElementById('start').onclick = function() {
        animate(0);
    }
}