JSFiddle - React, Tailwind, and code Playground

by ExceptionLimeCat

HTML

<div id="a"></div>
<br/>
<input type="button" onclick="obj.stop();" value="Stop" />
<p id="test"></p>

CSS

div{
    width: 25px;
    height: 25px;
    background: gold;
}

JavaScript

obj = {
    elm: null,
    clearInt: 0,
    direction: true,
    motion: function(){
    this.clearInt = setInterval(function(){
        if(this.elm){
            var left = this.elm.style.left.match(/\d+/);
            if(left > 99) direction = false;
            else if(left < 0) direction = true;
            this.elm.style.left = direction ? (left + 1) + 'px' : (left - 1) + 'px';
        }
        }, 200);
    },
    stop: function(){
        clearInterval(this.clearInt);
    }
}

obj.elm = document.getElementById("a");
obj.motion();
document.getElementById("test").innerHTML = obj.elm.id