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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    "function not defined" error

    I always get "function not defined" when buttons are clicked - can anyone tell me what's wrong with this code ?
    [CODE]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <title>Show and Hiding Images</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

    function showImage(){
    $('#imgSwitch').show();
    }
    function hideImage(){
    $('#imgSwitch').hide();
    }
    });//ready
    </script>
    </head>
    <body>
    <h1>Showing and Hiding Images</h1>
    <p>This is an example of showing and hiding images.</p>

    <IMG id="imgSwitch" SRC="./images/grid/SortASC.gif" WIDTH="50" HEIGHT="40" >

    <form>
    <input type="button" value="show" onclick="showImage()"></input>
    <input type="button" value="hide" onclick="hideImage()"></input>
    </form>

    </body>
    </html>
    [Icode]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Either remove your functions from $(document).ready - you're not actually doing anything when the DOM is ready here, or, better because less obtrusive, get rid of your onclick attributes and add click events within $(document).ready to run your function code.

    As it stands at the moment your inline onclick attributes are loading before $(document).ready and hence the functions are not defined. Try this and note the order in which the alerts fire:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <title>Show and Hiding Images</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    
    alert('setting up functions now');
    
    function showImage(){
    $('#imgSwitch').show();
    }
    function hideImage(){
    $('#imgSwitch').hide();
    }
    
    
    });//ready
    </script>
    </head>
    <body>
    <h1>Showing and Hiding Images</h1>
    <p>This is an example of showing and hiding images.</p>
    
    <IMG id="imgSwitch" SRC="./images/grid/SortASC.gif" WIDTH="50" HEIGHT="40" >
    
    <form>
    <input type="button" value="show" onclick="showImage()"></input>
    <input type="button" value="hide" onclick="hideImage()"></input>
    <script type="text/javascript">alert('onclick events established');</script>
    </form>
    
    </body>
    </html>
    Last edited by SB65; 11-08-2010 at 12:16 PM.

  • Users who have thanked SB65 for this post:

    Dee99 (11-09-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that was it

    --thanks

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Never use onclick="showImage() on the element, that is very bad practice, especially when you are using a library that makes it as easy as pie to add events the correct way.

    Code:
    $("#ElementId").click( function(){ $('#imgSwitch').show(); } );
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

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