JSFiddle - React, Tailwind, and code Playground

by Jobson Modesto

HTML

<div id = "placeDiv">ok</div><div id = "placeDiv1">ok</div><div id = "placeDiv2">ok</div>
   <button id="b1" onclick="forward()">Forward</button>
   <button id="b2" onclick="backward()">Backward</button>
<button id="b3" onclick="skip2()">skip2</button>
<button id="b4" onclick="automatic()">auto</button>
<button id="b5" onclick="stop()">stop</button>

CSS

#placeDiv{position:absolute;left:0px;width:100px;height:100px;}
#placeDiv1{position:absolute;left:100px;width:100px;height:100px;}
#placeDiv2{position:absolute;left:200px;width:100px;height:100px;}
#b1{position:absolute;top:100px;left:0px}
#b2{position:absolute;top:100px;left:80px}
#b3{position:absolute;top:100px;left:170px}
#b4{position:absolute;top:100px;left:270px}
#b5{position:absolute;top:100px;left:320px}

JavaScript

var myArray = ["black","yellow","green","red","blue","blue","black","gray"];
     var myArray1 = ["yellow","blue","green","red","green","blue","black","gray"];
     var myArray2 = ["yellow","blue","green","red","green","blue","black","gray"];
     var i = 0;
 document.getElementById("placeDiv").style.backgroundColor = myArray[i];
 document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
 document.getElementById("placeDiv2").style.backgroundColor = myArray2[i];
     forward=function(){
         
         if(i == myArray.length-1) 
         {i=0;}
         else
         {i=i+1;}
         document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];
 document.getElementById("placeDiv2").style.backgroundColor = myArray2[i];
       };     skip2=function(){
         
         if(i == myArray.length-4) 
         {i+=2;alert("This is the iterator "+i)}else if(i==7){i=0}else{i=i+1;};
         document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];
       };
backward=function(){
    
     if(i == 0)
     {i=myArray.length-1;i=myArray1.length-1;}
    else
    {
        i=i-1;
    }
    
    document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];
         //
    
}
  var m=null;   
  automatic=function(){
   clearInterval(m)
   m = setInterval(function(){
     if(i == myArray.length-1) 
         {i=0;}
         else
         {i=i+1;}
         document.getElementById("placeDiv1").style.backgroundColor = myArray1[i];
       document.getElementById("placeDiv").style.backgroundColor = myArray[i];
  
  },1);
function b(x,y){
var a =setInterval(function(){document.getElementById("placeDiv").style.left=x+++"px";if (x==100){d();clearInterval(a);}},10);
function d(){var z =...