JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Array of images</title>
    <script type="text/javascript">
         var myPics = new Array(3);
        myPics[0] = "./img/blue.png";
        myPics[1] = "./img/red.png";
        myPics[2] = "./img/yellow.png";
        var counter = 0;

        function preImg(){
        alert(counter);
            if(counter == 0)
                counter = 4;

            counter --;
        alert(counter);
            document.getElementById("coloredImg").src = myPics[counter];
        }

        function nextImg(){
            if(counter == 3)
                counter = -1;

            counter ++;

            document.getElementById("coloredImg").src = myPics[counter];
        }
    </script>
</head>
<body>
    <img src="./img/blue.png" id="coloredImg" alt="Image not found"/>
    <input type="button" onclick="preImg()" value="Previous"/>
    <input type="button" onclick="nextImg()" value="Next"/>
</body>
</html>