JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

CSS

button{width:40px;height:40px;background-color:#000;position:absolute;transition:all linear .5s;}
button:hover{background-color:transparent;}
.pos1{left:0px;}
.pos2{left:50px;}
.pos3{left:100px;}

.gobutton{left:auto;right:0;}

JavaScript

var body = document.body;
var num = 1;
var bArr = [];
var intervalID;
for(var i=0;i<3;i++){    
    bArr.push(addElement('button', "pos"+(i+1),i+1));
}
//var button = addElement('button','gobutton','Go');
console.log(bArr);
function addElement(nodeType, className, val){
    var el = document.createElement(nodeType);
    body.appendChild(el);     
    el.className = className;
    el.innerHTML = val;  
    return el;
}

//for(var i=0;i<3;i++){
var moveTotal = 3;
var moveNum = 0;
function moveElement(){
     console.log(moveNum);
    if(moveNum===moveTotal){
        console.log("clear");
        clearInterval(intervalID);
    }
    var j = Math.ceil(Math.random()*3);
    var moveEl = bArr[moveNum+1];
    console.log(moveEl);
    moveEl.className = "pos"+j;
    moveNum++;
}

intervalID = window.setInterval(moveElement, 500);

console.log(body);