...

View Full Version : reference issue?



low tech
05-20-2012, 10:43 AM
Hi

Experimenting.
Trying to add a simple onclick event via onload, but I can't get it right?

This works:


function checkStatus(box){
if(box.checked != box.defaultChecked){
alert("box status has changed");
}
}

HTML
<input type="checkbox" name="mycheckbox" id="mycheckbox" value="&cost=free" onclick="checkStatus(this)" />



This does not:


<input type="checkbox" name="mycheckbox" id="mycheckbox" value="&cost=free" />

window.onload = function (){
var mybox = document.getElementById('mycheckbox');
mybox.onclick = checkStatus; //how to get this to work??

//none of the following work
//mybox.onclick = checkStatus; //this calls the function but I don't have a box ref
//mybox.onclick = checkStatus();
//mybox.onclick = checkStatus(this);
//mybox.onclick = checkStatus(mybox);
}

LT

Wojjie
05-20-2012, 11:02 AM
mybox.onclick = function(){
checkStatus(this);
}

You need to pass a reference to onclick so you can't pass your own parameters unless you encase it in another function like I did above. You can also do this:



function checkStatus(){
var box=this;
if(box.checked != box.defaultChecked){
alert("box status has changed");
}
}

mybox.onclick = checkStatus

Or this...



mybox.onclick = function(){
var box=this;
if(box.checked != box.defaultChecked){
alert("box status has changed");
}
}

low tech
05-20-2012, 12:07 PM
Hi Wojjie

I knew I had to pass in the reference but I just couldn't get it --- mushy brain syndrome hahaha

Thanks for the code tips --- excellent:thumbsup:

LT

Dormilich
05-21-2012, 06:54 AM
You need to pass a reference to onclick so you can't pass your own parameters unless you encase it in another function like I did above. You can also do this:



function checkStatus(){
var box=this;
if(box.checked != box.defaultChecked){
alert("box status has changed");
}
}

mybox.onclick = checkStatus
or in other words, when you pass a handler function via the event property, the keyword this automatically refers to the element that executes the handler function and additionally it automatically passes the event object (W3C event model) as first and only function parameter.

if you pass the function via the event attribute, itís as if you would call the function from the global scope with the exception that the keywords this and event (verbatim in the attribute) refer to the element and event object.

Philip M
05-21-2012, 09:54 AM
This may perhaps be useful:-




CHECKBOX 1 <input type = "checkbox" id = "mybox1">
CHECKBOX 2 <input type = "checkbox" id = "mybox2">
CHECKBOX 3 <input type = "checkbox" id = "mybox3">

<script type = "text/javascript">

function checkStatus(){
var box = this;
alert ("Box " + box.id + " status has changed - now checked = " + box.checked);
}

mybox1.onclick = checkStatus
mybox2.onclick = checkStatus
mybox3.onclick = checkStatus

</script>

Old Pedant
05-21-2012, 10:54 PM
if you pass the function via the event attribute, itís as if you would call the function from the global scope with the exception that the keywords this and event (verbatim in the attribute) refer to the element and event object.

??? "event verbatim in the attribute"??? I thought event is only a magic keyword in MSIE. Can you show an example of what you mean by this?

Dormilich
05-21-2012, 11:38 PM
something like <a onclick="doSomething(event)">, though I never use inline events.

Old Pedant
05-22-2012, 03:04 AM
Fascinating. Never realized that event was magic in any browser other than MSIE.

felgall
05-22-2012, 03:34 AM
Fascinating. Never realized that event was magic in any browser other than MSIE.

You can actually use any variable name for the event to be passed in for browsers other than IE - but it only makes a difference inside the function. You can sometimes simplify the code if you use a variable name of event as then it can refer to the global even tobject in IE and to the value passed into the function in all other browsers.

As a simple example consider:


getEventType = function(event) {
return event.type;
};


Now if you have:


<div onclick="alert(getEventType())">

clicking on it will display an alert identifying that the event is a "click" in ALL browsers since in IE it event references the global event object and in other browsers it references the specific event object that all browsers except IE pass in as a parameter to all functions directly triggered by an event.

Old Pedant
05-22-2012, 05:34 AM
Yeah, that's a variant on what I was talking about and what Dormilich was saying.

I think this illustrates the point:


<html>
<body>
<input type="button" value="one" onclick="foo(event)"/>
<input type="button" value="two" onclick="foo(zamboni)"/>
<script type="text/javascript">
function foo(w) { alert(w.type) }
</script></body>
</html>

Button "one" works fine. Button "two" say "zamboni is not defined". In *ALL* browsers. Illustrating what Dormilich said: within the onclick handler, the keyword "event" is magic.

Not the same as window.event being magic anywhere in MSIE. All of which was a surprise to me. I learned about using the first argument being the event more years ago than I know, but never knew about this (to me) weirdness.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum