Results 1 to 8 of 8

Thread: get element by id .onclick help

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default get element by id .onclick help

    Hey everyone.
    I'm trying to set the onclick value of #foo to an alert(for testing purposes). Any help?

    index.html
    Code:
    <html>
    <head>
    	<script language="JavaScript" src="function.js"></script>
    	<script language="JavaScript">
    	function jFunc() {
    	$('foo').onclick = "javascript:alert('hi');";
    	}
    	</script>
    </head>
    <body onload="jFunc()">
    <a href="#" id="foo">Hello</a>
    </body>
    </html>
    function.js
    Code:
    	function $(element) {
    	return document.getElementById(element);
    	}
    Any help?


    p.s.

    Code:
    if(userknowswhatJqueryis == "true") {
    alert("Yes I'm ripping this off of jQuery, but i don't want to use jQuery.");
    } else {
    alert("It's called borrowing ideas...");
    }
    Last edited by keyboard; 02-23-2012 at 03:40 AM. Reason: Reset thread as resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Change:

    Code:
    $('foo').onclick = "javascript:alert('hi');";
    to:

    Code:
    $('foo').onclick = function(){alert('hi');};
    Just because you're aliasing getElementById doesn't mean you don't have to follow the general rules of basic javascript. Nor does it mean that you're ripping off jQuery. Lot's of script libraries use $ for this or some similar purpose. In fact, in jQuery it doesn't mean getElementById. It initializes 0 or more elements using a selector that's very much like a css selector, just more flexible and/or encompassing than ordinary css, to a collection of objects. This collection as a group is then subject to the full panoply of jQuery methods and shortcuts.

    All you're doing is making a shortcut for getElementById, saving a little typing.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by jscheuer1 View Post
    Change:
    Code:
    $('foo').onclick = function(){alert('hi');};
    Just because you're aliasing getElementById doesn't mean you don't have to follow the general rules of basic javascript.
    but I always use <tagname onclick="alert('hi');">Text</tagname>
    Should I not be???





    oh and p.s.

    if(userknowswhatJqueryis == "true") {
    alert("Yes I'm ripping this off of jQuery, but i don't want to use jQuery.");
    } else {
    alert("It's called borrowing ideas...");
    }
    It's called a joke......

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Inline assignment the function is represented as a string (in all the below, the highlighted is a function):

    Code:
    <a href="whatever.htm" onclick="alert('You Clicked Me!'); return flase;">Click</a>
    Basic assignment by javascript and getElementById the function is a true function:

    Code:
    <a id="mylink" href="whatever.htm">Click</a>
    <script>
    document.getElementById('mylink').onclick = function(){alert('You Clicked Me!'); return false;};
    </script>
    Or the less favored, back to representation as a string:

    Code:
    <a id="mylink" href="whatever.htm">Click</a>
    <script>
    document.getElementById('mylink').onclick = new Function("alert('You Clicked Me!'); return false;");
    </script>
    With the two string methods, nested quotes are more limited because the function itself is a quoted string. And evaluation by the browser's script parser is more time consuming and generally more subject to type errors.

    With all three of the above methods, the link may have one and only one onclick event. If another is assigned with the basic or less favored methods later, it overwrites the previous one.

    Using add/attach methods (actually the preferred method for ordinary javascript because more than one event of the same type can be assigned to an element), and we're back to a true function at least:

    Code:
    <a id="mylink" href="whatever.htm">Click</a>
    <script>
    function myfunc(e){
    	e = e || event;
    	if(e.preventDefault){e.preventDefault();}
    	e.returnValue = false;
    	alert('You Clicked Me!');
    }
    if (window.addEventListener){
    	document.getElementById('mylink').addEventListener('click', myfunc, false);
    }
    else if (window.attachEvent){
    	document.getElementById('mylink').attachEvent('onclick', myfunc);
    }
    </script>
    Which is one reason why jQuery can be attractive (multiple events can be assigned this way too, and we have a true function):

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	$('#mylink').click(function(e){
    		e.preventDefault();
    		alert('Ahh, jQuery');
    	});
    });
    </script>
    <a id="mylink" href="whatever.htm">Click</a>
    And, believe it or not, there are at least several other ways to do this.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Thanks for that!

    Keyboard1333

  6. #6
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default get element by id .onclick help

    index.html

    HTML Code:
    <html>
    <head>
    	<script language="JavaScript" src="jFunc.js"></script>
    	<script language="JavaScript">
    	/*
    	function jFunc() {
    	$('foo').onclick = function(){
    	alert('hi');
    	};
    	}
    	*/
    	var x = $('foo').innerHTML;
    	alert(x);
    	</script>
    </head>
    <body>
    <a href="#" id="foo">Hello</a>
    </body>
    </html>
    jFunc.js

    Code:
    	function $(element) {
    	return document.getElementById(element);
    	}
    Can anyone tell me why it won't work.

    script debug - SCRIPT5007: Unable to get value of the property 'innerHTML': object is null or undefined
    Last edited by keyboard; 02-23-2012 at 12:25 AM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    At that point the object is null or undefined. $('foo')* isn't defined until later. If you did:

    Code:
    <html>
    <head>
    	<script src="jFunc.js"></script>
    </head>
    <body>
    <a href="#" id="foo">Hello</a>
    	<script>
    	var x = $('foo').innerHTML;
    	alert(x);
    	</script>
    </body>
    </html>
    Then $('foo') would be defined and it would alert 'Hello'.



    *Yes the $ function is defined at that point, but the element with the id of 'foo' has not been defined yet. That happens when the browser parses it (reads its HTML code) in the body. Since that happens after the script in the head, $('foo') is undefined when the script is run.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    jscheuer1 you absalote(spelling) legend. Thanks heaps!

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
  •