/    Sign up×
Community /Pin to ProfileBookmark

onpropertychange does not call my JS function

Copy linkTweet thisAlerts:
Jul 21.2011

Hi all,

I’m hitting a strange problem, hopefully I’m just making a plain obvious mistake ?

The following code works on FF, but not in IE (8), and I have really no idea why.
In FF both option One and Two work.
In IE only option Two works.

It seems like on IE my javascript function is not called.
Yet, if I f.e. use <body onload=”recalc()”> then it IS called.

What am I doing wrong?

Thanks a lot!

[CODE]<html>
<head>
<script type=”text/javascript”>
function recalc()
{
alert(‘hi!’);
}
</script>
</head>
<body>
<input type=”checkbox” onpropertychange=”recalc();” onchange=”recalc();” name=”abc”>One<br>
<input type=”checkbox” onpropertychange=”alert(‘hi’);” onchange=”alert(‘hi’);” name=”def”>Two
</body>
</html>[/CODE]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@rnd_meJul 21.2011 — what is onpropertychange?
Copy linkTweet thisAlerts:
@kknaapauthorJul 21.2011 — what is onpropertychange?[/QUOTE]
I don't know if this is really your question, as a google on that -> 1st hit will show you exactly what it does.

But, you can replace [I]onpropertychange[/I] in the code with [I]onclick[/I] if you want, the effect is the same: the alert() is executed, but my function is not... if you can tell me why, I would be grateful.
Copy linkTweet thisAlerts:
@jamesbcox1980Jul 21.2011 — What's wrong with just plain onchange?
Copy linkTweet thisAlerts:
@jamesbcox1980Jul 21.2011 — I think his point was that onpropertychange isn't a standard method.
Copy linkTweet thisAlerts:
@kknaapauthorJul 22.2011 — onchange on IE works different than FF, it is not called directly when the checkbox changes status, but has something to do with losing focus.

Anyway, my question is still: why does alert() work, and my function doesn't?
Copy linkTweet thisAlerts:
@jamesbcox1980Jul 22.2011 — What I'm saying is that onpropertychange doesn't exist in FF, so I have no idea why it would work in FF to begin with. The only thing that should work is the onchange in FF. As for IE, since it's not a standard event, I can understand why it wouldn't work in some versions, and I don't think there's much else you can do with it.

Instead of using the on[event] attributes of HTML, just use a cross browser method of attaching events in the script itself:

[CODE]function addEvent(target, eventtype, eventhandler, bubble) {
if (target.addEventListener) {
target.addEventListener(eventtype, eventhandler, bubble);
} else if (target.attachEvent) {
target.attachEvent("on" + eventtype, eventhandler);
} else {
target["on" + eventtype] = eventhandler;
}
}

//A cross browser event object model
function evt (e) {
var t;
e = e || event;
if (e.target) t = e.target;
else t = e.srcElement;
return {
"event" : e,
"target" : t
}
//more parts can be added as necessary
}[/CODE]

Here's an example of the couple of things you can do with this:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Checkbox onclick</title>
<script type="text/javascript">
/* Some cross browser functions for working with events */
//a cross browser event attachment function
function addEvent(target, eventtype, eventhandler, bubble) {
if (target.addEventListener) {
target.addEventListener(eventtype, eventhandler, bubble);
} else if (target.attachEvent) {
target.attachEvent("on" + eventtype, eventhandler);
} else {
target["on" + eventtype] = eventhandler;
}
}

//A cross browser event object model
function evt (e) {
var t;
e = e || event;
if (e.target) t = e.target;
else t = e.srcElement;
return {
"event" : e,
"target" : t
}
//more parts can be added as necessary
}
/* End cross browser functions */
function recalc() {
alert('hi!');
}

function alertValue(e) {
//e is the event object sent by FF
var myEvent = evt(e);
alert(myEvent.target.checked ? myEvent.target.name + ": " + myEvent.target.value : myEvent.target.name + ": " + 0);

}
function init() {
//functions to fire when page loads
addEvent(document.aForm.abc, "click", recalc, false);
addEvent(document.aForm.def, "click", alertValue, false);
}

//attach init to onload event
addEvent(window, "load", init, false);
</script>
</head>

<body>
<form action="" method="get" name="aForm">
<input type="checkbox" name="abc" value="1" />One<br>
<input type="checkbox" name="def" value="2" />Two
</form>
</body>
</html>
[/CODE]
×

Success!

Help @kknaap spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...