Advanced Javascript Object question

I need help with the code listed below. See the line below the
comment-// *** This displays the error ***

I want to be able to have the event handler call the function based on
the reference that I pass to my objects member function. This works ok
as long as I do not try to pass any arguments. How can I have the event
call the function reference with variables? See addEventHandler( )
function below...

Thanks in advance...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<script language="JavaScript1.2">

</script>

</body>
</html>

George wrote:[color=blue]
> I need help with the code listed below. See the line below the
> comment-// *** This displays the error ***
>[/color]
[snip][color=blue]
>
>
> BorderBox.prototype.addEventHandler = function(func)
> {
> // *** This works -----
> //this.mainbox.onclick = func;
>
>
> // *** This displays the error ***
> // I need to be able to pass veriables into this function.
> this.mainbox.onclick = func("str1", "str2");[/color]

You are trying to assign the return value of func to the onclick event.
Do the following instead:

this.mainbox.onclick = function () { func("str1", "str2"); return
false; };

Also the onclick event expects a boolean to be returned. So you may
change the "return false" to "return true" or vice versa depending on
what kind of behavior you're trying to do.
[color=blue]
> }
>
>
>
>
> function popup(s1, s2)
> {
> alert("Value1: " + s1 + " Value2: " + s2);
> }
>
>
> var a = new BorderBox();
>
> // Pass reference to the event handler.
> a.addEventHandler(popup);
>
>
> //-->
> </script>
>
> </body>
> </html>[/color]

The only problem is that the func variable is a reference to a function
that is not included in the object that is using it. I have to have the
ability to pass a function by reference into the object to be called
when the event occurs. In the real application this function reference
will be a reference to a function within another object.

I can not use the line: this.mainbox.onclick = function () {
func("str1", "str2"); return false; };

The func variable needs to be a reference to an external function that
is not part of the object or even of the file in which the object is
contained.

web.dev wrote:[color=blue]
> George wrote:
>[color=green]
>>I need help with the code listed below. See the line below the
>>comment-// *** This displays the error ***
>>[/color]
>
> [snip]
>[color=green]
>>
>>BorderBox.prototype.addEventHandler = function(func)
>>{
>> // *** This works -----
>> //this.mainbox.onclick = func;
>>
>>
>> // *** This displays the error ***
>> // I need to be able to pass veriables into this function.
>> this.mainbox.onclick = func("str1", "str2");[/color]
>
>
> You are trying to assign the return value of func to the onclick event.
> Do the following instead:
>
> this.mainbox.onclick = function () { func("str1", "str2"); return
> false; };
>
> Also the onclick event expects a boolean to be returned. So you may
> change the "return false" to "return true" or vice versa depending on
> what kind of behavior you're trying to do.
>
>[color=green]
>>}
>>
>>
>>
>>
>>function popup(s1, s2)
>>{
>> alert("Value1: " + s1 + " Value2: " + s2);
>>}
>>
>>
>>var a = new BorderBox();
>>
>>// Pass reference to the event handler.
>>a.addEventHandler(popup);
>>
>>
>>//-->
>></script>
>>
>></body>
>></html>[/color]
>
>[/color]

George <romans5_8@earthlink.net> writes:
[color=blue]
> I can not use the line: this.mainbox.onclick = function () {
> func("str1", "str2"); return false; };[/color]

If you can use
this.mainbox.onclick = func;
then you can also use the above.
[color=blue]
> The func variable needs to be a reference to an external function that
> is not part of the object or even of the file in which the object is
> contained.[/color]

Not a problem. The "func" variable works either way.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

I tried this as shown below and it worked, however, when I tried to put
a variable in place of the fixed text string it said that the variable
is undefined,

Example:

this.mainbox.onclick = function () {
func(this.id, "str2"); return false; };

This would not work....Any ideas?

Thanks

Lasse Reichstein Nielsen wrote:[color=blue]
> George <romans5_8@earthlink.net> writes:
>
>[color=green]
>>I can not use the line: this.mainbox.onclick = function () {
>>func("str1", "str2"); return false; };[/color]
>
>
> If you can use
> this.mainbox.onclick = func;
> then you can also use the above.
>
>[color=green]
>>The func variable needs to be a reference to an external function that
>>is not part of the object or even of the file in which the object is
>>contained.[/color]
>
>
> Not a problem. The "func" variable works either way.
>
> /L[/color]

George <romans5_8@earthlink.net> writes:
[color=blue]
> I tried this as shown below and it worked, however, when I tried to
> put a variable in place of the fixed text string it said that the
> variable is undefined,[/color]
[color=blue]
> Example:
>
> this.mainbox.onclick = function () {
> func(this.id, "str2"); return false; };[/color]

There is no variable this (except "func"). The "this" operator will
refer to the element referred by "this.mainbox" when the onclick event
runs. If you want to refer to "this" object of the assignment inside
the function, you will need to store it as a variable:

var self = this;
this.mainbox.onclick = function () {
func(self.id, "str2"); return false; };

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Lasse Reichstein Nielsen wrote in message news:psqudqey.fsf@hotpop.com...[color=blue]
> George writes:
>[color=green]
>> I tried this as shown below and it worked, however, when I tried to
>> put a variable in place of the fixed text string it said that the
>> variable is undefined,[/color]
>[color=green]
>> Example:
>>
>> this.mainbox.onclick = function () {
>> func(this.id, "str2"); return false; };[/color]
>
> There is no variable this (except "func"). The "this" operator will
> refer to the element referred by "this.mainbox" when the onclick event
> runs. If you want to refer to "this" object of the assignment inside
> the function, you will need to store it as a variable:
>
> var self = this;
> this.mainbox.onclick = function () {
> func(self.id, "str2"); return false; };[/color]

I have somehow a "similar" question.
I have an object (a slider) which has an "onchange" event(?)
until now I've been calling it as follows:

mySlider1.onchange = "document.sliderform.slidervalg.value = this.getValue(0)";

now, I had to expand what "onchange" does, so I added:

mySlider1.onchange = "document.sliderform.slidervalg.value =
this.getValue(0);document.getElementById('greenInp ut').style.backgroundColor='#00'+Dec2Hex(this.getV alue(0))+'00';document.getElemen
tById('rgbInput').style.backgroundColor='rgb('+rea dColors(document.getElementById('rgbInput').style. backgroundColor)[0]+','+this.get
Value(0)+','+readColors(document.getElementById('r gbInput').style.backgroundColor)[2]+')';";

This is very uneasy to read, so I've been thinking on redoing the script as follows:

mySlider1.onchange = function() {
var ri = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[0]; //red
var gi = this.getValue(0); //green
var bi = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[2]; //blue
document.sliderform.slidervalg.value = gi;
document.getElementById('greenInput').style.backgr oundColor='#00'+Dec2Hex(gi)+'00';
document.getElementById('rgbInput').style.backgrou ndColor='rgb('+ri+','+gi+','+bi+')';
}

I do have "this.getValue". would it work in my case or do I also need to define a variable
like it is explained above? or am I going at it the wrong way?
is there a reference guide I can look up different ways to assign functions to events
(or event handlers)?

Robi wrote in message news:i6KdnRWYfbqUjqfeRVn-pg@trueband.net...[color=blue]
> Lasse Reichstein Nielsen wrote in message news:psqudqey.fsf@hotpop.com...[/color]
[...][color=blue][color=green][color=darkred]
>>> this.mainbox.onclick = function () {
>>> func(this.id, "str2"); return false; };[/color]
>>
>> There is no variable this (except "func"). The "this" operator will
>> refer to the element referred by "this.mainbox" when the onclick event
>> runs. If you want to refer to "this" object of the assignment inside
>> the function, you will need to store it as a variable:
>>
>> var self = this;
>> this.mainbox.onclick = function () {
>> func(self.id, "str2"); return false; };[/color]
>
> I have somehow a "similar" question.
> I have an object (a slider) which has an "onchange" event(?)
> until now I've been calling it as follows:
>
> mySlider1.onchange = "document.sliderform.slidervalg.value = this.getValue(0)";
>
> now, I had to expand what "onchange" does, so I added:[/color]
[...][color=blue]
> mySlider1.onchange = function() {
> var ri = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[0]; //red
> var gi = this.getValue(0); //green
> var bi = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[2]; //blue
> document.sliderform.slidervalg.value = gi;
> document.getElementById('greenInput').style.backgr oundColor='#00'+Dec2Hex(gi)+'00';
> document.getElementById('rgbInput').style.backgrou ndColor='rgb('+ri+','+gi+','+bi+')';
> }
>
> I do have "this.getValue". would it work in my case or do I also need to define a variable
> like it is explained above? or am I going at it the wrong way?
> is there a reference guide I can look up different ways to assign functions to events
> (or event handlers)?[/color]

In the haste I forgot to mention that I have 3 slider objects, and all 3 have /almost/
the same "onchange" but there is still a slight difference on the colors being set:

mySlider0.onchange = function() {
var ri = this.getValue(0); //red
var gi = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[1]; //green
var bi = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[2]; //blue
document.sliderform.slidervalr.value = ri;
document.getElementById('redInput').style.backgrou ndColor='#'+Dec2Hex(ri)+'0000';
document.getElementById('rgbInput').style.backgrou ndColor='rgb('+ri+','+gi+','+bi+')'
}

mySlider1.onchange = function() {
var ri = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[0]; //red
var gi = this.getValue(0); //green
var bi = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[2]; //blue
document.sliderform.slidervalg.value = gi;
document.getElementById('greenInput').style.backgr oundColor='#00'+Dec2Hex(gi)+'00';
document.getElementById('rgbInput').style.backgrou ndColor='rgb('+ri+','+gi+','+bi+')';
}

mySlider2.onchange = function() {
var ri = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[0]; //red
var gi = readColors(document.getElementById('rgbInput').sty le.backgroundColor)[1]; //green
var bi = this.getValue(0); //blue
document.sliderform.slidervalb.value = bi;
document.getElementById('blueInput').style.backgro undColor='#0000'+Dec2Hex(bi);
document.getElementById('rgbInput').style.backgrou ndColor='rgb('+ri+','+gi+','+bi+')';
}

my question now: would a "self" variable be enough?

var self=this;
mySlider0.onchange = function() {
var ri = self.getValue(0); //red
// rest of function
}

self=this;
mySlider1.onchange = function() {
var gi = self.getValue(0); //green
// rest of function
}

self=this;
mySlider2.onchange = function() {
var bi = self.getValue(0); //blue
// rest of function
}

or do I need
var self0, self1, self2?

and what happens if another script uses the "self" variable for a different purpose?

This worked great! Thanks

Lasse Reichstein Nielsen wrote:[color=blue]
> George <romans5_8@earthlink.net> writes:
>
>[color=green]
>>I tried this as shown below and it worked, however, when I tried to
>>put a variable in place of the fixed text string it said that the
>>variable is undefined,[/color]
>
>[color=green]
>>Example:
>>
>> this.mainbox.onclick = function () {
>> func(this.id, "str2"); return false; };[/color]
>
>
> There is no variable this (except "func"). The "this" operator will
> refer to the element referred by "this.mainbox" when the onclick event
> runs. If you want to refer to "this" object of the assignment inside
> the function, you will need to store it as a variable:
>
> var self = this;
> this.mainbox.onclick = function () {
> func(self.id, "str2"); return false; };
>
> /L[/color]

Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

re: Advanced Javascript Object question

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about