www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Newbie trouble with an if statement

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    7

    Newbie trouble with an if statement

    Hi!

    I'm trying to change an image on a web page two times, always after the user clicks on it. First I want to change from original.jpg to change1.jpg and then from change1.jpg to change2.jpg.

    But no matter what, I can't get the following code to work:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>The greatest page title ever</title>
    <script type="text/javascript">
    function image_control() {
    	 if (document.getElementById('changingimage').src == 'original.jpg'){
    		document.getElementById("changingimage").src = 'change1.jpg';
    	}
    	if (document.getElementById('changingimage').src == 'change1.jpg'){
    		document.getElementById('changingimage').src = 'change2.jpg';
    	}
    	
    }
    </script>
    </head>
    
    <body>
    <img id="changingimage" src="original.jpg" onclick="image_control();" alt="a changing image" />
    
    </body>
    </html>

  2. #2
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    I think all you need is an one 4 letter word in front of your second IF statement...
    "ELSE"

    What happens now is that the first if-check kicks in, and changes the source of the image.
    However, then the second if-statement ALSO kicks in, because it should...Unless you add ELSE before your second IF, to prevent them both from being triggered...

    Code:
    function image_control() {
    	 if (document.getElementById('changingimage').src == 'original.jpg'){
    		document.getElementById("changingimage").src = 'change1.jpg';
    	}
    	else if (document.getElementById('changingimage').src == 'change1.jpg'){
    		document.getElementById('changingimage').src = 'change2.jpg';
    	}
    }
    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

  3. #3
    Join Date
    Apr 2012
    Posts
    7
    Hi and thank you very much for your reply!

    I added the "else" as you suggested, but still nothing happens when I test by clicking on the image in firefox.

    The person who gave me this code was using longer addresses for the images and he referenced to them like 'http://localhost/TestPrograms/images/1.jpg'

    Could there be a clue for solving this since my file paths are much simpler (my pictures are in the root folder)?

  4. #4
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Try this. It is inefficient though.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>The greatest page title ever</title>
    <script type="text/javascript">
    function image_control() {
    	 if (document.getElementById('changingimage').src == 'original.jpg'){
    		document.getElementById("changingimage").src = 'change1.jpg';
    	}else{
    		if (document.getElementById('changingimage').src == 'change1.jpg'){
    			document.getElementById('changingimage').src = 'change2.jpg';
    		}
    	}
    	
    }
    </script>
    </head>
    
    <body>
    <img id="changingimage" src="original.jpg" onclick="image_control();" alt="a changing image" />
    
    </body>
    </html>

  5. #5
    Join Date
    Apr 2012
    Posts
    7
    Thanks for helping!

    It's still not working though.. This really puzzles me now. My eyes are hurting for all the code chasing, but I just can't figure it out. Unless it has to do with the file paths somehow, since those are different in my code than in the example.

  6. #6
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    Without a link to your page, it will be hard for me to spot a path-issue...
    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

  7. #7
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    What is the path to your images?

  8. #8
    Join Date
    Apr 2012
    Posts
    7
    All my images are in the document root folder, meaning that they exist right next to the html-file..

  9. #9
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Is your site live? If so, can I get a link?

  10. #10
    Join Date
    Apr 2012
    Posts
    7
    It's not live, but give me a few minutes and I publish it somewhere!

  11. #11
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    It probably IS a path issue...
    If you're testing locally, the src is probably something like file:://Users/You/Documents/original.jpg or something like that...
    Once live, it might work perfectly by itself..
    To test this locally, I think this will work though, both locally and online...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>The greatest page title ever</title>
    <script type="text/javascript">
    function image_control() {
    	if (document.getElementById('changingimage').getAttribute('src') == 'original.jpg'){
    		document.getElementById('changingimage').setAttribute('src','change1.jpg'); 
    	}
    	else 	if (document.getElementById('changingimage').getAttribute('src') == 'change1.jpg'){
    		document.getElementById('changingimage').setAttribute('src','change2.jpg'); 
    	}
    }
    </script>
    </head>
    <body>
    <img id="changingimage" src="original.jpg" onclick="image_control()" alt="a changing image" />
    </body>
    </html>
    Either that, or don't check on the exact src, but check the END of the source, i.e. use a regEx to strip away anything before the filename.
    Last edited by Spinner; 04-09-2012 at 05:52 PM. Reason: Added the regex thingie
    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

  12. #12
    Join Date
    Apr 2012
    Posts
    7
    Hi!

    It's online now, the address is:

    http://hamstraajat.com/

    Even online its not working.

    The file paths should work since typing http://hamstraajat.com/change1.jpg to the address bar will load the image with that name in firefox.
    Last edited by neutrinox; 04-09-2012 at 05:55 PM.

  13. #13
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    And as you can see in your console.log,
    document.getElementById('changingimage').src
    returns
    "http://hamstraajat.com/original.jpg"

    However, document.getElementById('changingimage').getAttribute('src')
    returns
    "original.jpg"

    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

  14. #14
    Join Date
    Apr 2012
    Posts
    7
    Oh wow, you are right! I also tried replacing the comparison == url's with http://hamstraajat.com/original.jpg and so on and now it works.

    It's strange though that I only have to change the comparisons, but not the

    document.getElementById('changingimage').src = 'change2.jpg';

    line to an absolute path. Why it works on the latter but not on the comparison is strange for me.

    But great to have this finally solved! Thank you very much!

  15. #15
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    You're welcome
    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles