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

Discussion in 'Javascript' started by Jason, Oct 10, 2006.

  1. Jason

    Jason Guest

    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
     
    Jason, Oct 10, 2006
    #1
    1. Advertising

  2. Jason

    RobG Guest

    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
     
    RobG, Oct 10, 2006
    #2
    1. Advertising

  3. Jason

    Jason Guest

    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
     
    Jason, Oct 11, 2006
    #3
  4. Jason

    RobG Guest

    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
     
    RobG, Oct 11, 2006
    #4
  5. Jason

    Jason Guest

    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
     
    Jason, Oct 11, 2006
    #5
  6. Jason

    Jason Guest

    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
     
    Jason, Oct 11, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Siemel Naran

    Does true ^ true return false?

    Siemel Naran, Jun 17, 2004, in forum: C++
    Replies:
    19
    Views:
    669
    Chris Theis
    Jun 18, 2004
  2. Replies:
    0
    Views:
    479
  3. Replies:
    2
    Views:
    1,108
  4. grocery_stocker
    Replies:
    10
    Views:
    633
    Keith Thompson
    May 25, 2005
  5. bdb112
    Replies:
    45
    Views:
    1,351
    jazbees
    Apr 29, 2009
Loading...

Share This Page