SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)

    Javascript Events in Head... window.onload.etc.

    Hi.

    Okay you know how you can do something like...


    window.onload=function(){myFunction();}

    in order to contain all you javascript in the head of your document??


    Well why can't I seem to do...

    document.getelementbyid('MyElement').onclick=function(){myFunction();}

    ??

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    addEventListener

    You could try something like
    HTML Code:
    my_elem = document.getelementbyid('MyElement');
    my_elem.addEventListener(
        "click",
        function() {
    // whatever ;
        },
        true);

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because document.getElementById() will only work if the element it's looking for has been added to the DOM. Hence, it's best to call things via a window.onload handler.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Because document.getElementById() will only work if the element it's looking for has been added to the DOM. Hence, it's best to call things via a window.onload handler.
    So does that mean it would work if I put it at the bottom of my document... (before the last </html> tag) and would that be recommended??

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, you could put a <script> just before the end tag for <body>. However, I do not recommend doing that.

    I suggest you check out these:
    http://dean.edwards.name/weblog/2005/10/add-event2/
    http://dean.edwards.name/weblog/2006/06/again/

    I often use this to add onload handlers.
    Code:
    // note: this crashes Netscape versions 4.02 and older
    function dss_addLoadEvent(fn) {
      if(typeof(fn)!="function")return;
      var tempFunc=window.onload;
      window.onload=function() {
        if(typeof(tempFunc)=="function")tempFunc();
        fn();
      }
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    I use that script already, actually... but the problem is that I don't want to add an onload event.

    I want to add an onclick event...

    I have an image with an id and I wanted a function to be triggered when this image is clicked.

    I was trying to avoid adding an "onclick" tag to the image.


    Edit:

    I'll do up an example and post it...

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stephen is correct. Though, I thought I had made that point clear in a previous reply.
    Quote Originally Posted by Shaun(OfTheDead)
    I use that script already, actually... but the problem is that I don't want to add an onload event.
    What about the one discussed in the second link?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Stephen is correct. Though, I thought I had made that point clear in a previous reply.

    What about the one discussed in the second link?
    Ore!!

    I didn't click the links at all, actually...

    I'm reading them now, though.

  9. #9
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    	<title>Example</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    
    	<style type="text/css">
    		*{margin:0px; padding:0px;}
    		a img{border:none;}
    		body{background:#ffffff;}
    	</style>
    
    	<script type="text/javascript">
    		window.onload=function()
    					{
    					alert('Window Load Event Triggered');
    					}
    
    		document.getelementbyid('TriggerLink').onclick=function()
    					{
    					alert('Hello World !!');
    					}
    	</script>
    </head>
    
    <body>
    	<a id="TriggerLink" href="#">Click Here</img>
    </body>
    
    </html>
    In FireFox I get the error, "document.getelementbyid is not a function".

    Internet Explorer says "Object doesn't support this property or method".



    Edit:

    Also the theory of putting the script before the last </body> tag didn't work either... same error messages.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You need the onclick code inside the onload code like this:

    Code:
    window.onload=function() {
        alert('Window Load Event Triggered');
        document.getelementbyid('TriggerLink').onclick=function() {alert('Hello World !!');}
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall
    You need the onclick code inside the onload code like this:

    Code:
    window.onload=function() {
        alert('Window Load Event Triggered');
        document.getelementbyid('TriggerLink').onclick=function() {alert('Hello World !!');}
    }
    Makes sense, but I'm still getting the same error messages...

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    	<title>Example</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    
    	<style type="text/css">
    		*{margin:0px; padding:0px;}
    		a img{border:none;}
    		body{background:#ffffff;}
    	</style>
    
    	<script type="text/javascript">
    		window.onload=function() {
    		    alert('Window Load Event Triggered');
    		    document.getelementbyid('TriggerLink').onclick=function() {alert('Hello World !!');}
    		}
    	</script>
    </head>
    
    <body>
    	<a id="TriggerLink" href="#">Click Here</img>
    </body>
    
    </html>

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JavaScript is case-sensitive -- document.getelementbyid() doesn't exist.

    You want document.getElementById().

    *chuckles* I'm surprised it took us this long to notice it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    JavaScript is case-sensitive -- document.getelementbyid() doesn't exist.

    You want document.getElementById().

    *chuckles* I'm surprised it took us this long to notice it.

  14. #14
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Okay it works now...

    Both putting the script before the end </body> tag...


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    	<title>Example</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    
    	<style type="text/css">
    		*{margin:0px; padding:0px;}
    		a img{border:none;}
    		body{background:#ffffff;}
    	</style>
    </head>
    
    <body>
    	<a id="TriggerLink" href="#">Click Here</img>
    	<script type="text/javascript">
    		document.getElementById('TriggerLink').onclick=function()
    					{
    					alert('Hello World !!');
    					}
    	</script>
    </body>
    
    </html>

    As well as adding the onclick to the onload...

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    	<title>Example</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    
    	<style type="text/css">
    		*{margin:0px; padding:0px;}
    		a img{border:none;}
    		body{background:#ffffff;}
    	</style>
    
    	<script type="text/javascript">
    window.onload=function() {
        document.getElementById('TriggerLink').onclick=function() {alert('Hello World !!');}
    }
    	</script>
    </head>
    
    <body>
    	<a id="TriggerLink" href="#">Click Here</img>
    </body>
    
    </html>

    Thanks a lot, guys!!


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
  •