SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW. 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 [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. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try alerting the content of document.images[0].src and you'll see the problem.




  4. #4
    SitePoint Member
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try alerting the content? I don't know what you mean.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/chrisupjohn/u9yD4/

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    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.

    http://jsfiddle.net/chrisupjohn/u9yD4/
    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");
    }
    }

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


Tags for this Thread

Bookmarks

Posting Permissions

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