Making a traffic light test:
The first click switches the light to green. The second click doesn't work. The code seems good. After the first click the redLight.png gets replaced by greenLight.png, and the browser displays a green traffic light. But on the second click, the browser should search, see "greenLight.png" and replace it with "yellowLight.png".

YOUTUBE VISUAL EXPLANATION:


BROKEN TEST CODE (LIGHT ONLY SWITCHES ONCE TO GREEN):
PHP Code:
<script type="text/javascript">
    function 
lightSwitch(){
    if (
document.images[0].src "images/redLight.png")
        {
        
document.images[0].src "images/greenLight.png";
        }
        
    else if (
document.images[0].src "images/greenLight.png")
        {
        
document.images[0].src "images/yellowLight.png";
        }
        
    else if(
document.images[0].src "images/yellowLight.png"){
        
document.images[0].src "images/redLight.png";
        }
    }
</script>

        <form >
        <input type="button" value="Switch The Light" onclick="lightSwitch();" />
        </form> 
ORIGINAL WORKING CODE (LIGHT SWITCHES FINE):

PHP Code:
<script type="text/javascript">
    var 
nextLightStatus "green";
    function 
lightSwitch(){
    if (
nextLightStatus == "green"){
        
document.images[0].src "images/greenLight.png";
        
nextLightStatus "yellow";
        }
    else if (
nextLightStatus == "yellow"){
        
document.images[0].src "images/yellowLight.png";
        
nextLightStatus "red";
        }
    else if(
nextLightStatus == "red"){
        
document.images[0].src "images/redLight.png";
        
nextLightStatus "green";
        }
    }
</script>

        <form >
            <div class="switch-btn"><input type="button" value="Switch The Light" onclick="lightSwitch();" /></div>
        </form>