Document.images[0].src not updating

JavaScript
1

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:

//youtu.be/GH6-TRxz_r4

BROKEN TEST CODE (LIGHT ONLY SWITCHES ONCE TO GREEN):


<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):

<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>
2

BTW. I tried the “equivalent operator” (==) at the end of the video, but it didn’t work either:

function lightSwitch(){
	if (document.images[0].src [COLOR="Red"]==[/COLOR] "images/redLight.png")
		{
		document.images[0].src = "images/greenLight.png";
		}
		
	else if (document.images[0].src [COLOR="Red"]==[/COLOR] "images/greenLight.png")
		{
		document.images[0].src = "images/yellowLight.png";
		}
		
	else if(document.images[0].src [COLOR="Red"]==[/COLOR] "images/yellowLight.png"){
		document.images[0].src = "images/redLight.png";
		}
	}
3

Try alerting the content of document.images[0].src and you’ll see the problem.


4

Try alerting the content? I don’t know what you mean.

5

Personally i would do this a different way, i would use CSS3 with jQuery and have an image fallback which is far more flexible and more maintainable in the long run. See the following jsFiddle for the demo.

6

Thanks, Chris for responding. Totally agree about your code sample being way more flexible. I’ve seen my programmer friends do really flexible working code with css and jquery.

I’m a noob at JS. This was more of a lesson/learning curve question for me on how the JS translator/processor works/thinks. I can match strings like the code below, but can I do that with images too? If so, why is my code breaking?

function helloTest(strTest){
var greetings = “Hello World!!!”;
var stringSent = document.forms[0].txtField.value;

if (greetings == stringSent){
alert(“it’s a match!”);
}

else{alert("Not a match");
}

}

             &lt;form &gt;
	        &lt;input type="text" size="20" name="txtField"&gt;&lt;/br&gt;
		&lt;input type="button" value="Test Sent String" onclick="helloTest();" /&gt;
	&lt;/form&gt;