Adding an avent handler to a Javascript array of objects 1

[Nefarta]

I have a function that creates and returns an array of <div> each containong an <input> object:

<style type="text/css">
#divContainer { position=absolute; top: 0px; left: 0px; display: block; }

.TimeEditDiv { position:absolute; top: 0px; left: 0px; display: block; }

.TimeEditInput { border: solid; border-width: 0; margin: 0; padding: 0px;
color: white; background-color: green;
font-family: "Courier New"; font-size: 10pt; font-weight: bold;
width: 2.5em; height: 1.1em; }
</style>

<div id="divContainer">
</div>

<script language="JavaScript" type="text/javascript">
function createArray {
var divArray = [];
var container = document.getElementById("divContainer");
...
for (var x = 0; x < totalx; x++) {
divArray[x] = [];
for (var y = 0; y < totaly; y++) {
divArray[x][y] = [];
var newDiv = document.createElement('div');
newDiv.className = 'TimeEditDiv';
newDiv.id = 'TimeEditDiv_' + x + '_' + y;

var newInput = document.createElement('input');
newInput.type = 'text';
newInput.id = 'TimeEditInput_' + x + '_' + y;
newInput.className = 'TimeEditInput';

newDiv.appendChild(newInput);
container.appendChild(newDiv);
divArray[x][y] = newDiv;
}
}
return(divArray);
}
</script>

What is the best place to add an event handler (say onMouseOver) to each <input> in the array?

I've tried doing through the embedded <style> sheet:
...
.TimeEditInput { border: solid; border-width: 0; margin: 0;
onMouseOver:"this.style.color='red'";
}
...
or variations therof, but no luck!

I also tried to do it inside the function that creates the array of <input>, something like:
...
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.id = 'TimeEditInput_' + loopX + '_' + loopY;
newInput.className = 'TimeEditInput';
onMouseOver = "color='red'";
...

No joy.

Can I do it outside the function, after the array has been created, using something like
...
var temp = myArray[0][0].????????????????? // add event here
...

Thanks

 

[trollacious]

Have you tried this syntax?

newInput.onMouseOver = "this.style.color='red'";

Lee

 

[Nefarta]

Just did. No luck!

 

[rac2]

How about

newInput.onmouseover = "this.style.color='red'";

or

newInput.onmouseover = eval("this.style.color='red'");

or

newInput.onmouseover = paintItRed;
...
function paintItRed () {
  this.style.color='red';
}

Two things, the name of an event handler member of an object is all lower case. It is assigned to a reference to a function, that is, the function name without parentheses.

So newInput.onmouseover = paintItRed() would mean to assign the value returned by paintItRed() to the event handler, not good. And newInput.onmouseover = "this.style.color='red'" would mean assign a reference to a string, also not good.

But the problem with the last bit of code is the "this." . It is not clear what object is this object.

See page 135 of Dynamic HTML: The Definitive Reference from OReilly.

 

[tsdragon]

I just wrestled with this problem myself and found a solution. The term "this" loses its context inside an event handler. What you have to do is explicitly refer to the element in the event handler, and using eval is the way to do it. Something like this:

eval("newInput[\"onmouseover\"] = function() { document.getElementById(\"" + newInput.id + "\").style.color = \"red\"; }; ");

Put that in right after you create newInput and assign it an id.

Assuming newInput.id is [tt]TimeEditInput_1_2[/tt] the code evaluated is

newInput["onmouseover"] = function() { document.getElementById("TimeEditInput_1_2").style.color = "red"; };

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Nefarta]

Wow! It works!
Thanks a lot Tracy!

 

[tsdragon]

You're welcome.

For those with more complicated event handlers, you can call a separately defined function from within the anonymouse function. You can also pass parameters to that function, as long as the value of those parameters is known at the time you execute the eval to define the event handler. This is one way to partially circumvent the inability to pass parameters to an event handler.

Incidentally, I discovered the ability to refer to an event handler as a member of a collection (the [tt]newInput["onmouseover"][/tt] syntax) while looking thru the code for the DynArch DHTML Calendar. It is very cleverly written code.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Nefarta]

Tracy:

How would you call a separately defined function?

For example, given the following code...

<script language="JavaScript" type="text/javascript">
var newInput = document.createElement('input');
newInput.id = 'TimeEditInput_' + x + '_' + y + '_OUT';
eval("newInput[\"onblur\"] = function() { document.getElementById(\"" + newInput.id + "\").style.backgroundColor = \"lightgrey\";}; ");
</script>

...you would have to define a function (say bcolor(parameter)) where the parameter would have to be the newInput.id so that the function would know which element the onblur event is to be attached to.

Can you give me a blueprint of such a function call and of the function itself?

Thanks
Nefarta

 

[tsdragon]

The technique is exactly the same, just put the function call for your new function WITHIN the anonymous function created for the event handler, and move the existing code into your new function, using the element id as a parameter:

eval("newInput[\"onblur\"] = function() { bcolor(\"" + newInput.id + "\"); }; ");

function bcolor(sId) {
   document.getElementById(sId).style.backgroundColor = "lightgrey";
}

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.