By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,827 Members | 2,195 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,827 IT Pros & Developers. It's quick & easy.

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

P: n/a
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

Oct 10 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Jason wrote:
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);
}

[...]
--
Rob

Oct 10 '06 #2

P: n/a
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


RobG wrote:
Jason wrote:
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);
}

[...]
--
Rob
Oct 11 '06 #3

P: n/a
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. :-)
--
Rob

Oct 11 '06 #4

P: n/a
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
RobG wrote:
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. :-)
--
Rob
Oct 11 '06 #5

P: n/a
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

Jason wrote:
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
RobG wrote:
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. :-)
--
Rob
Oct 11 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.