JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<button onclick="moveDown()">Move Down</button><button onclick="moveUp()">Move Up</button>

<div id="box" style="left: 200px; top: 50px;"></div>

CSS

#box {
    position: absolute;
    background-color: red;
    height: 200px;
    width: 200px;
}

JavaScript

function moveDown() {
    var obj = document.getElementById("box");
    var topVal = parseInt(obj.style.top, 10);
    obj.style.top = (topVal + 100) + "px";    
}

function moveUp() {
    var obj = document.getElementById("box");
    var topVal = parseInt(obj.style.top, 10);
    obj.style.top = (topVal - 100) + "px";    
}