Setting <TD> onclick will give _extended="true" or event="undefined" in IE

[Jason]

Hello,
I am trying to dynamically create a table, then set its <td>'s onclick:

var table = document.createElement("table");
var row = table.insertRow(-1);
var td = row.insertCell(-1);
td.onclick = myfunction;

function myfunction(event) {
alert(event);
}

For some reason I cant get this to work. I have tried:
- td.setAttribute("onclick", myfunction);
- Event.observe(td, 'click', myfunction, false);

None of them will register the onclick event properly. Either td will
have _extended="true" as an attribute, or event will be "undefined" in
myfunction. This is only a problem in IE. Does anyone know how to fix
this problem?

- Jason

 

[RobG]

Hello,
I am trying to dynamically create a table, then set its <td>'s onclick:

var table = document.createElement("table");
var row = table.insertRow(-1);
var td = row.insertCell(-1);
td.onclick = myfunction;

I think you forgot:

document.body.appendChild(table);

function myfunction(event) {

Gecko (and similar) browsers pass a reference to an event object as the
first paramter when calling a function assigned to an intrinsic event
handler this way. IE doesn't, it uses a global 'event' variable.

Your local variable "event" here masks IE's global event variable, to
accommodate both models, use:

function myfunction(e) {
var e = e || window.event;
/* e is now a reference to the appropriate event object */
alert(e);
}

[...]

 

[Jason]

Still doesnt work...So i wrote a test script demoing the bug:

window.onload = function() {
var table = document.createElement("table");
table.style.width = "200px";
table.style.height = "200px";
table.style.border = "1px solid black";
var row = table.insertRow(-1);
var td = row.insertCell(-1);
td.onclick = myfunction;
document.body.appendChild(table);
}

function myfunction(e) {
alert(e);
alert(window.event);
}

Any ideas why e is undefined?

- Jason

Hello,
I am trying to dynamically create a table, then set its <td>'s onclick:

var table = document.createElement("table");
var row = table.insertRow(-1);
var td = row.insertCell(-1);
td.onclick = myfunction;

I think you forgot:

document.body.appendChild(table);

function myfunction(event) {

Gecko (and similar) browsers pass a reference to an event object as the
first paramter when calling a function assigned to an intrinsic event
handler this way. IE doesn't, it uses a global 'event' variable.

Your local variable "event" here masks IE's global event variable, to
accommodate both models, use:

function myfunction(e) {
var e = e || window.event;
/* e is now a reference to the appropriate event object */
alert(e);
}

[...]

 

[RobG]

Jason wrote:

Do not top-post, reply below a trimmed quote of the text you are
replying to.

Still doesnt work...So i wrote a test script demoing the bug:

I've grown to rather dislike the term "bug", it is used to refer to any
behaviour that is contrary to that expected, whether it is the result
of an error or not. But anyhow, thank you for posting a concise
example.

window.onload = function() {
var table = document.createElement("table");
table.style.width = "200px";
table.style.height = "200px";
table.style.border = "1px solid black";
var row = table.insertRow(-1);
var td = row.insertCell(-1);
td.onclick = myfunction;
document.body.appendChild(table);
}

function myfunction(e) {
alert(e);
alert(window.event);
}

Any ideas why e is undefined?

It is undefined in IE because you haven't assigned a value to it (read
my previous post again). The function I posted was (comment removed):

function myfunction(e) {
var e = e || window.event;
alert(e);
}

Notice the difference? The line:

var e = e || window.event;

might be easier to understand as:

if ( typeof e != 'object' && typeof window.event == 'object') {
e = window.event;
} else {
e = undefined;
}

but the former is considerably shorter.

 

[Jason]

Yes but it seems window.event isn't getting set to the right thing.
Even if I do
function myfunction(e) {
var e = e || window.event;
alert(e);
alert(e.target);
}
e is just "[object]" and e.target is "undefined". I need to make
e.target give me the element I clicked on. How do I do this?

- Jason

 

[Jason]

Ok I think I figured it out. In IE I have to call e.srcElement instead
of e.target. Also e gets printed as [object] in IE, while e gets
printed as [object MouseEvent], so I thought e wasn't getting set to
the right thing.

Thanks for everyone's help!
- Jason

Yes but it seems window.event isn't getting set to the right thing.
Even if I do
function myfunction(e) {
var e = e || window.event;
alert(e);
alert(e.target);
}
e is just "[object]" and e.target is "undefined". I need to make
e.target give me the element I clicked on. How do I do this?

- Jason

Jason wrote:

Do not top-post, reply below a trimmed quote of the text you are
replying to.


I've grown to rather dislike the term "bug", it is used to refer to any
behaviour that is contrary to that expected, whether it is the result
of an error or not. But anyhow, thank you for posting a concise
example.


It is undefined in IE because you haven't assigned a value to it (read
my previous post again). The function I posted was (comment removed):

function myfunction(e) {
var e = e || window.event;
alert(e);
}

Notice the difference? The line:

var e = e || window.event;

might be easier to understand as:

if ( typeof e != 'object' && typeof window.event == 'object') {
e = window.event;
} else {
e = undefined;
}

but the former is considerably shorter.