JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<div id="box"></div>
    <input type="button" value="NEXT" onclick="nextcolor()">
    <input type="button" value="PREVIOUS" onclick="prevcolor()">

CSS

#box{width: 500px; height: 400px;}

JavaScript

var boxcolor=["pink","blue","orange","magenta"];
var div=document.getElementById('box');
var len = boxcolor.length;
var i=0;

changeColor(i);

function changeColor(index){
    div.style.background=boxcolor[index];
}

function nextcolor(){
    i = (i+1) % len;
    changeColor(i);
}

function prevcolor(){
    i = (len+(i-1)) % len;
    changeColor(i);
}