Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts

    document.images[0].src not updating

    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:
    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> 
    Last edited by ryanjohnsond; 07-01-2012 at 12:40 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts

  • Users who have thanked Logic Ali for this post:

    ryanjohnsond (07-07-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    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:

    PHP Code:
    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";
            }
        } 
    Last edited by ryanjohnsond; 07-01-2012 at 02:18 AM.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by ryanjohnsond View Post
    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.

  • Users who have thanked Logic Ali for this post:

    ryanjohnsond (07-07-2012)

  • #5
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    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:
    PHP Code:
    ...src ="images/redLight.png")
    to
    PHP Code:
    ...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?

    PHP Code:
    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
    Last edited by ryanjohnsond; 07-01-2012 at 04:15 AM.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by ryanjohnsond View Post
    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:
    Code:
    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:
    Code:
    <!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>

  • Users who have thanked Logic Ali for this post:

    ryanjohnsond (07-07-2012)

  • #7
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    PHP Code:

      var 
    sequenceData = [ [  510], 
                           [ 
    .501], 
                           [ 
    .500], 
                           [ 
    .501], 
                           [ 
    .500], 
                           [ 
    .501], 
                           [ 
    .500], 
                           [  
    500], 
                           [  
    301]  ],
          
    lights = [],
          
    index 0;

      for( var 
    0elemId; ( elemId arguments] ); i++ )     
        
    lights] = document.getElementByIdelemId ); 
    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:

    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> 

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    another approach...

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

  • Users who have thanked xelawho for this post:

    ryanjohnsond (07-07-2012)

  • #9
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by ryanjohnsond View Post
    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?

  • Users who have thanked Logic Ali for this post:

    ryanjohnsond (07-07-2012)

  • #10
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    PHP Code:
    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]

    Quote Originally Posted by xelawho View Post
    PHP Code:
    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)?
    Last edited by ryanjohnsond; 07-06-2012 at 07:58 AM.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    you can have a look at this thread, where that snippet was explained to me. The relevant bits are from post 7 onwards.

  • Users who have thanked xelawho for this post:

    ryanjohnsond (07-07-2012)

  • #12
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    you can have a look at this thread, 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.

    PHP Code:
    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> 
    Last edited by ryanjohnsond; 07-24-2012 at 07:01 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •