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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question JavaScript conditional operator

    I am trying to make a function to toggle an image src when a button (another image) is clicked... This is what I have so far, and it doesn't work. It does work when you adapt it to change other properties of the image, such as width, but not the src... any ideas of what could be wrong?
    Thanks

    <script>
    function click(obj)
    {
    var el = document.getElementById(obj);
    el.src= (el.src== "a.png" ? "b.png" : "a.png") ;
    }
    </script>

    <img id="im" src="a.png">

    <img src="button.png" onclick="click('im')" >

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,149
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    click is a reserved word. Rename the function.

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    click is a reserved word. Rename the function.
    It is the same when I rename it.

    The function works for one click if the image starts as b.png (it changes to a.png) but doesnt change back when the script is run again. It also does nothing if you start with a.png...

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there tl87,

    and a warm welcome to these forums.

    try it like this...
    Code:
    
    <script type="text/javascript">
       var flag=1;;
    function chick(obj){
       var el=document.getElementById(obj);
       flag=(flag==0)?(el.src='a.png',flag=1):(el.src='b.png',flag=0);
    
     }
    window.onload=function(){
       document.getElementById('om').onclick=function() {
       chick('im');
      }
     }
    </script>
    
    <img id="im" src="a.png" alt="">
    
    <img id="om" src="button.png" alt="" >
    
    coothead

  • Users who have thanked coothead for this post:

    tl87 (08-30-2008)

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks got it to work!

  • #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    How do I make the "flag" specific to the (obj) so I can run the same script in multiple places on one page?

  • #7
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by tl87 View Post
    <script>
    function click(obj)
    {
    var el = document.getElementById(obj);
    el.src= (el.src== "a.png" ? "b.png" : "a.png") ;
    }
    </script>
    The actual cause of the error is that src contains the entire path not just the filename, Try this:
    Code:
    function Click(obj)
    {
     var el = document.getElementById(obj);
     el.src= (el.src.match("a.png") ? "b.png" : "a.png") ;
    }

  • Users who have thanked Arty Effem for this post:

    tl87 (08-30-2008)

  • #8
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks that solves both problems in one!


  •  

    Posting Permissions

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