Using a function's objects in onclick

HappyDude

08-05-2002, 04:47 AM

I have a function that is supposed to take a button and change its onclick so that when pressed, it changes the value of an object to something. The problem is, the object I need the onclick to change is one of the function arguments, and thus, when the button is pressed, the argument no longer exists because by then, all the values in the function will be gone, because the function will have ended... what I was thinking of doing is rather than putting the name of the object in onclick, putting the object itself there... unfortunately, all my attempts to do so have failed horribly, and I'm not sure it's possible...
Here's a little example I made to try to help explain my problem...

<html>
<head>
</head>
<body>
<input id='AButton' type='button' value='A Button'>
<input id='AnotherButton' type='button' value="Another Button"><br>
<input type='button' value="Tell me the value of blah!" onclick='alert(blah.myvalue)'>
<input type='button' value="Tell me the value of blah2!" onclick='alert(blah2.myvalue)'>
<script>
//These are the objects whose values should be changing
var blah=new Object()
blah.myvalue="I have a value. I'm special."
var blah2=new Object()
blah2.myvalue="I have a value too. YAY!"

//This function is supposed to take a button, an object and a value,
//then change the onclick of the button to make the object's 'myvalue' property become the value parameter...
// but doesn't work, read comments
function MakeButtonChangeBlahValue(thebutton,theblah,thevalue)
{
//Doesn't work because by the time the button is pressed, theblah doesn't exist because the function already finished
thebutton.onclick='theblah.myvalue='+thevalue

//Doesn't work. Why? Because Javascript doesn't want it to.
thebutton.onclick=theblah+'.myvalue='+thevalue

//Read above comment
thebutton.onclick=theblah.myvalue+'='+thevalue

//This doesn't give any error, but the problem is that it changes the value instantly, rather than when the button is pressed
// thebutton.onclick=theblah.myvalue=thevalue
}

//'Should' change the onclick of the buttons to change the value of the blahs when they're clicked on... but doesn't because function doesn't work
MakeButtonChangeBlahValue(document.getElementById('AButton'),blah,"This is what I want my value to be")
MakeButtonChangeBlahValue(document.getElementById('AnotherButton'),blah2,"This is what I want my other value to be")

</script>
</body>
</html>

Any ideas anyone?

glenngv

08-05-2002, 07:40 AM

why not just use this:

<input id='AButton' type='button' value='A Button' onclick="blah.value='This is what I want my value to be'">
<input id='AnotherButton' type='button' value="Another Button" onclick="blah.value='This is what I want my other value to be'"><br>
<input type='button' value="Tell me the value of blah!" onclick='alert(blah.myvalue)'>
<input type='button' value="Tell me the value of blah2!" onclick='alert(blah2.myvalue)'>
<script>
//These are the objects whose values should be changing
var blah=new Object()
blah.myvalue="I have a value. I'm special."
var blah2=new Object()
blah2.myvalue="I have a value too. YAY!"
</script>

HappyDude

08-05-2002, 07:17 PM

I need to use the function to do it, because I need to be able to change what the onclick changes the value to dynamically. The example is oversimplistic, just to help illustrate the problem... in my real code, it would take me hours to actually code in every possibility the way you suggest in your example...

adios

08-05-2002, 07:42 PM

Without commenting on whatever it is you're trying to do :confused:

this:

thebutton.onclick='theblah.myvalue='+thevalue

...does nothing. To work, HTML event handlers are wrapped in function objects, the usual way to store callable JS code. This:

<div onclick="alert('foo')">

...looks like this at the DOM level:

HTMLElement.onclick = function() { alert('foo') }

If you want to dynamically re-write HTML event handlers, you'll need to explicitly wrap them; the only other way is to put the code in a separate (top-level) function and assign a reference (pointer) like:

HTMLElement.onclick = function_name;

...without the operator pair (parentheses) which is actually not part of the function's name, but serves to invoke it.

One other thing: functions are full-fledged data types in JavaScript - you can store them, parse & modify them (after using .toString()), assign them to arrays, objects, whatever. btw, the above explains why this:

<form......onsubmit="validate()">

...doesn't work: the call to validate is, you guessed it, wrapped inside a function object, and its return value remains there unless you explicitly pass it from the wrapper:

<form......onsubmit="return validate()">

jkd

08-05-2002, 08:12 PM

Originally posted by adios
...does nothing. To work, HTML event handlers are wrapped in function objects, the usual way to store callable JS code. This:

<div onclick="alert('foo')">

...looks like this at the DOM level:

HTMLElement.onclick = function() { alert('foo') }

Actually in NS, it looks like:
function onclick(event) {
alert("foo");
}

And in IE:
function anonymous() {
alert("foo");
}

:)

adios

08-05-2002, 08:24 PM

jkd...

Aware of that - but I think it's irrelevent - I believe those are just platform-specific approaches to 'naming' the lambda functions. You can replace either of those handlers with truly anonymous function objects and they'll function (sorry) as before. It seems they're bound to the event, if that's the correct terminology, by their position in the instance hierarchy, not by any particular naming of the contained object. Make sense? :confused:

jkd

08-05-2002, 08:58 PM

Originally posted by adios
jkd...

Aware of that - but I think it's irrelevent - I believe those are just platform-specific approaches to 'naming' the lambda functions. You can replace either of those handlers with truly anonymous function objects and they'll function (sorry) as before. It seems they're bound to the event, if that's the correct terminology, by their position in the instance hierarchy, not by any particular naming of the contained object. Make sense? :confused:

Crystal - I agree with you 100% - I just think browser-generated methods dynamically created from your set attributes are very interesting, esp. how they differ between browsers. And is definitely noteworthy pointing out how *they* do it, but is no means required by you.

I always use (real) anonymous functions for event handlers, and for permanent event listeners assigned via addEventListener. (When I want to remove them though, much more convenient to define it somewhere though). :)

adios

08-05-2002, 09:14 PM

Agreed. ;) Very interesting.

Makes one wonder as to the why of proprietary approaches, as well as the how..

RadarBob

08-06-2002, 03:12 AM

fasinating stuff fellas. Where can I read more about the inner sanctum of the function object and all it's esoteric workings?

jkd

08-06-2002, 04:23 AM

Originally posted by RadarBob
fasinating stuff fellas. Where can I read more about the inner sanctum of the function object and all it's esoteric workings?

Check out http://developer.netscape.com/docs/manuals/js/core/jsref15/contents.html

As for learning the inner workings of the browser, you gotta experiment:

<a href="#" onclick="alert(arguments.callee)">bla</a>

Stuff like that. :)

You learn something new everyday. :) I checked that in Opera, and it appears it does both:
function anonymous(event) {
alert(arguments.callee);
}
:D