get element by id .onclick help

**keyboard** · 02-22-2012, 01:58 AM

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...");
}

**jscheuer1** · 02-22-2012, 02:31 AM

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.

**keyboard** · 02-22-2012, 04:32 AM

Originally Posted by jscheuer1

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......

**jscheuer1** · 02-22-2012, 05:14 AM

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.

**keyboard** · 02-22-2012, 05:36 AM

Thanks for that!

Keyboard1333

**keyboard** · 02-22-2012, 10:22 PM

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

**jscheuer1** · 02-23-2012, 03:17 AM

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.

**keyboard** · 02-23-2012, 04:40 AM

jscheuer1 you absalote(spelling) legend. Thanks heaps!

Thread: get element by id .onclick help

Thread Tools

Search Thread

get element by id .onclick help

get element by id .onclick help

Bookmarks

Bookmarks

Posting Permissions