JSFiddle - React, Tailwind, and code Playground

by mkdskd

HTML

<body onload="buildImage();">
    <div class="contents" id="content"></div>
    <button onclick="changeImage()">NextImage</button>
</body>

JavaScript

var images = [ 'http://lorempixel.com/400/200/sports/1', 'http://lorempixel.com/400/200/sports/2','http://lorempixel.com/400/200/sports/3','http://lorempixel.com/400/200/sports/4' ];
    var index = 0;

    function buildImage() {
      var img = document.createElement('img')
      img.src = images[index];
      document.getElementById('content').appendChild(img);
    }

    function changeImage(){
      var img = document.getElementById('content').getElementsByTagName('img')[0]
      index++;
      index = index % 4; // This is for if this is the last image then goto first image I have 4 images so I've given 4 change accordingly 
      img.src = images[index];
    }