...

View Full Version : document.images[0].src not updating



ryanjohnsond
07-01-2012, 12:04 AM
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 LINK VISUAL EXPLANATION:
http://www.youtube.com/watch?v=GH6-TRxz_r4

MY NEW BROKEN TEST 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>
[/PHP]

ORIGINAL WORKING 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>

Logic Ali
07-01-2012, 12:39 AM
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Expressions_and_Operators#Comparison_operators

ryanjohnsond
07-01-2012, 01:23 AM
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Expressions_and_Operators#Comparison_operators

What do I need to fix with my operators? I tried the "equivalent operator" (==) at the end of the video, but it didn't work either:


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";
}
}

Logic Ali
07-01-2012, 01:56 AM
What do I need to fix with my operators? I tried the "equivalent operator" (==) at the end of the video, but it didn't work either:src always contains the full path, so a straight comparison with the applied relative path will fail.

ryanjohnsond
07-01-2012, 04:03 AM
src always contains the full path, so a straight comparison with the applied relative path will fail.
I don't know what you mean, "src always contains the full path,"
You mean get rid of the 'images/' folder reference in the images/redLight.png? like this? I tried it, but it didn't work.
Remove images folder:

...src ="images/redLight.png")"
to

...src = "redLight.png")
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");
}
}

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

Logic Ali
07-01-2012, 03:37 PM
I don't know what you mean, "src always contains the full path,"


document.images[0].src will always contain something like

http://mysite.xxx/images/redLight.png

That is why your test fails.

You could search for a unique part of the string using:

if( document.images[0].src.indexOf( "images/redLight.png" ) > -1 )
...
Of course a more versatile method is to have a data table representing the different states of the lights throughout their sequence.

This assignment comes-up regularly, and I have posted this previously to demonstrate cycling lights:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type='text/css'>

#wrapper div{ height : 40px ; width : 40px; margin : 1px; background-color : black; border-radius : 20px; border: solid 1px #000 }

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pedestrian Traffic Lights Controller</title>

<script type="text/javascript" >

function pelicanLights()
{
var sequenceData = [ [ 5, 1, 0, 0 ],
[ .5, 0, 1, 0 ],
[ .5, 0, 0, 0 ],
[ .5, 0, 1, 0 ],
[ .5, 0, 0, 0 ],
[ .5, 0, 1, 0 ],
[ .5, 0, 0, 0 ],
[ 5, 0, 0, 1 ],
[ 3, 0, 1, 0 ] ],
lights = [],
index = 0;

for( var i = 0, elemId; ( elemId = arguments[ i ] ); i++ )
lights[ i ] = document.getElementById( elemId );

function display()
{
if( index >= sequenceData.length )
index = 0;

for( var i = 0, cv, dLen = lights.length; i < dLen; i++ )
lights[ i ].style.backgroundColor = ( sequenceData[ index ][ i+1 ] ? lights[ i ].id.match(/^[a-z]+/i).toString() : '#000' );

setTimeout( display, sequenceData[ index++ ][ 0 ] * 1000 );
}

display();
}

window.onload = function(){ pelicanLights( "red-light", "yellow-light", "lightgreen-light" ); };

</script>
</head>
<body>
<div id="wrapper">
<h1>Traffic Lights Controller</h1>
<div id="red-light"></div>
<div id="yellow-light"></div>
<div id="lightgreen-light"></div>
</div>
</body>
</html>

ryanjohnsond
07-02-2012, 11:42 PM
{
var sequenceData = [ [ 5, 1, 0, 0 ],
[ .5, 0, 1, 0 ],
[ .5, 0, 0, 0 ],
[ .5, 0, 1, 0 ],
[ .5, 0, 0, 0 ],
[ .5, 0, 1, 0 ],
[ .5, 0, 0, 0 ],
[ 5, 0, 0, 1 ],
[ 3, 0, 1, 0 ] ],
lights = [],
index = 0;

for( var i = 0, elemId; ( elemId = arguments[ i ] ); i++ )
lights[ i ] = document.getElementById( elemId );

I'm a noob. Sorry for the dumb question, but why make a matrix of all the available possibilities, instead of the original code? See below:


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

xelawho
07-03-2012, 12:20 AM
another approach...



<body>
<img id ="thepic" src="http://www.proprofs.com/flashcards/upload/q5726524.jpg"></img>
<button onclick="changeLight()">Change Light</button>
<script type="text/javascript">
var lights=["http://www.proprofs.com/flashcards/upload/q5726523.jpg","http://www.proprofs.com/flashcards/upload/q5726521.jpg","http://www.proprofs.com/flashcards/upload/q5726524.jpg"]
var count=0;
function changeLight(){
document.getElementById("thepic").src=lights[count++%lights.length]
}
</script>
</body>

Logic Ali
07-03-2012, 01:21 AM
I'm a noob. Sorry for the dumb question, but why make a matrix of all the available possibilities, instead of the original code?
Maintainability and flexibility. If you want to amend the sequence you just change the data, instead of fumbling with repetitive if statements.
To get the same sequence, how would your code have to look?

ryanjohnsond
07-06-2012, 04:55 AM
var lights=["http://www.proprofs.com/flashcards/upload/q5726523.jpg","http://www.proprofs.com/flashcards/upload/q5726521.jpg","http://www.proprofs.com/flashcards/upload/q5726524.jpg"]
var Lights is considered an array, starting at 0?

For example, is this the correct understanding?
q5726523.jpg is [0]
q5726521.jpg is [1]
q5726524.jpg is [2]




document.getElementById("thepic").src=lights[count++%lights.length]
Question:
I tested your code; so, I know it works
What does the percent (%) do between the count++ and lights.length (count++%lights)?

count++ means increment 1
and
light.length means gets the length of the array, q5726523.jpg is [0], q5726521.jpg is [1], q5726524.jpg is [2]?

But what does this mean lights.length (count++%lights)?

xelawho
07-06-2012, 12:35 PM
you can have a look at this thread (http://www.codingforums.com/showthread.php?t=242588), where that snippet was explained to me. The relevant bits are from post 7 onwards.

ryanjohnsond
07-24-2012, 06:54 PM
you can have a look at this thread (http://www.codingforums.com/showthread.php?t=242588), where that snippet was explained to me. The relevant bits are from post 7 onwards.

Thanks, xelawho. All that was extremely hepful, along with the Ask.com description of the Modulus.


var months = ["january", "february", "march","april","may","june","july",
"august","september","october","november","december"]
var clk = 0;

function test(){
document.getElementById("test").innerHTML = months[clk];

clk++;
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum