PDA

View Full Version : Resolved 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


<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


function $(element) {
return document.getElementById(element);
}


Any help?
:D

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

jscheuer1
02-22-2012, 02:31 AM
Change:


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

to:


$('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
Change:

$('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):


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


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


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


<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):


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


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:


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