JSFiddle - React, Tailwind, and code Playground

HTML

<h1><u><b>Changing Traffic Lights</b></u><h1>

<button type="button" onClick="changeLights()"> Change Lights </button>    <!-- Creates a button to change the lights with -->

<img id ="trafficlight" src="http://lorempixel.com/100/100"></img>   <!-- Creates the first visible image on the page and gives it an ID so it can be called up later -->

<script>

var trafficlights = ["http://lorempixel.com/100/100","http://lorempixel.com/100/90","http://lorempixel.com/100/100","http://lorempixel.com/100/110"]  //creates an array for the lights

var currentlight = 0 //Creates a counter variable

function changeLights () {         //Calls up a function and designs it
    document.getElementById("trafficlight").src=trafficlights[currentlight]  //Calls up the image and enables it to be changed
    currentlight=currentlight+1   //Adds one to the counter
    if (currentlight>3){
        currentlight=0
    }
}

</script>