Mozilla doesn't handle function pointer well?

Discussion in 'Javascript' started by nick, Sep 30, 2004.

  1. nick

    nick Guest

    I have the following code:
    var ocevent = function(v)

    {

    alert('javascript event: u clicked '+v);

    return false;

    };

    var items = {

    "002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },

    "003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },

    ....}

    And I use the following code to assign the click property to onclick of
    anchor.

    a.setAttribute('onclick', items[id].click);

    However, the code works well in IE but not in Mozilla Firefox. To test the
    code go to:

    http://greywolfdesign.com/tmp/gallery/gallery.htm

    Any suggestion for function pointers?
    nick, Sep 30, 2004
    #1
    1. Advertising

  2. On Thu, 30 Sep 2004 11:15:25 -0400, nick <>
    wrote:

    [snip]

    > And I use the following code to assign the click property to onclick of
    > anchor.
    >
    > a.setAttribute('onclick', items[id].click);
    >
    > However, the code works well in IE but not in Mozilla Firefox.


    That's because IE doesn't conform to standards. The setAttribute method
    takes two string arguments, but IE allows any type for the second.

    The solution is simple: don't use setAttribute. At all. All the attributes
    you set in that code can, and should be, set using the relevant properties.

    > Any suggestion for function pointers?


    There's no such thing as a pointer in Javascript. They're references.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Sep 30, 2004
    #2
    1. Advertising

  3. nick

    Lee Guest

    nick said:
    >
    >I have the following code:
    >var ocevent = function(v)
    >
    >{
    >
    >alert('javascript event: u clicked '+v);
    >
    >return false;
    >
    >};
    >
    >var items = {
    >
    >"002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },
    >
    >"003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },
    >
    >...}
    >
    >And I use the following code to assign the click property to onclick of
    >anchor.
    >
    >a.setAttribute('onclick', items[id].click);


    A little testing shows that the problem isn't with function
    references, but with the way you're assigning the onclick
    event handler. Don't use setAttribute() to set event handlers.
    Much simpler and more robust:

    a.onclick=items[id].click;
    Lee, Sep 30, 2004
    #3
  4. nick

    nick Guest

    Thanks, right, the right term should be function reference, but quite a few
    web site use term function pointer,

    when i define the function reference in the following array, I had to wrap
    the ocevent function with another anonymous function. Anyway to avoid it?
    var ocevent = function(v)

    {

    alert('javascript event: u clicked '+v);

    return false;

    };

    var items = {

    "002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },

    "003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },



    "Michael Winter" <> wrote in message
    news:eek:pse5cajqcx13kvk@atlantis...
    > On Thu, 30 Sep 2004 11:15:25 -0400, nick <>
    > wrote:
    >
    > [snip]
    >
    >> And I use the following code to assign the click property to onclick of
    >> anchor.
    >>
    >> a.setAttribute('onclick', items[id].click);
    >>
    >> However, the code works well in IE but not in Mozilla Firefox.

    >
    > That's because IE doesn't conform to standards. The setAttribute method
    > takes two string arguments, but IE allows any type for the second.
    >
    > The solution is simple: don't use setAttribute. At all. All the attributes
    > you set in that code can, and should be, set using the relevant
    > properties.
    >
    >> Any suggestion for function pointers?

    >
    > There's no such thing as a pointer in Javascript. They're references.
    >
    > Mike
    >
    > --
    > Michael Winter
    > Replace ".invalid" with ".uk" to reply by e-mail.
    nick, Sep 30, 2004
    #4
  5. On Thu, 30 Sep 2004 11:56:17 -0400, nick <>
    wrote:

    > Thanks, right, the right term should be function reference, but quite a
    > few web site use term function pointer,


    Pointer is a term to be associated with memory addresses. As Javascript
    doesn't expose that information, it isn't the right term to use.

    > when i define the function reference in the following array, I had to
    > wrap the ocevent function with another anonymous function. Anyway to
    > avoid it?


    If you want to pass an argument, what you've got is probably the most
    reliable way. You'd probably have to restructure your code, completely. I
    might be wrong, though.

    [snip]

    > "Michael Winter" <> wrote in message
    > news:eek:pse5cajqcx13kvk@atlantis...


    Please don't top-post. Write your responses in conversation order; placed
    below the text you are directly responding to. Remove everything else
    (preferably indicating when you do).

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Sep 30, 2004
    #5
  6. nick wrote:

    [Pretty-printed the source code]
    > var ocevent = function(v)
    > {
    > alert('javascript event: u clicked '+v);
    > return false;
    > };


    It would be both more reasonable and downwards compatible to write

    function ocevent(v)
    {
    alert('javascript event: u clicked ' + v);
    return false;
    }

    > var items = {
    > "002.jpg": {text:"002", href:"#", click:function(){return ocevent(2)} },

    ^^^^^^^^
    What will users do without support for client-side scripting?

    > "003.jpg": {text:"003", href:"#", click:function(){return ocevent(3)} },
    > ...}


    It would be more downwards compatible if you used both the Object and
    Function constructors:

    var items = new Object();
    items["002.jpg"] = new Object();
    items["002.jpg"].text = "002";
    items["002.jpg"].href = "#"; // TODO!
    items["002.jpg"].click = new Function("return ocevent(2);");

    items["003.jpg"] = new Object();
    items["003.jpg"].text = "003";
    items["003.jpg"].href = "#"; // TODO!
    items["003.jpg"].click = new Function("return ocevent(3);");

    However, whether you want that depends on the (age of) UAs you want
    to support. Object literals require at least JavaScript 1.1 or an
    ECMAScript 3 compliant language implementation; the `function'
    operator is available from JavaScript 1.5 and ECMAScript 3 on.

    > And I use the following code to assign the click property to onclick of
    > anchor.
    >
    > a.setAttribute('onclick', items[id].click);


    It is because you are assigning a Function object reference to an
    attribute where a (DOM) string is expected. It is not a bug in
    setAttribute() in Firefox, it is your misuse of that method and
    probably a weird implementation in IE to convert the reference
    into a string (by calling the toString() method of the referenced
    Function object). Either pass a string

    a.setAttribute('onclick', "return ocevent(3)");

    or assign the function reference to the `onclick' property of the object
    referenced with "a":

    a.onclick = items[id].click;

    However, I do not know if the former with IE, in fact I am almost certain
    it does not work with IE prior to version 5 (as those versions do not
    support the W3C DOM); the latter technique on the other hand should work
    with all browsers that support client-side scripting (taking into account
    that `a' refers to an HTMLAnchorElement object or its equivalent).

    However, the recommended standards compliant technique as of the W3C DOM
    Level 2 Events Specification is

    a.addEventListener('click', function() { return ocevent(3); }, false);

    See also registerEvent() in <http://pointedears.de/scripts/dhtml.js>.

    > Any suggestion for function pointers?


    See above. As for the latter, there are no function pointers, since
    there are no (accessible) pointers, in JavaScript 1.x and ECMAScript
    implementations.


    PointedEars
    --
    Sincerity is everything -- fake that, and you've got it made.
    -- George Burns
    Thomas 'PointedEars' Lahn, Oct 17, 2004
    #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. Aquila Deus
    Replies:
    9
    Views:
    429
    Aquila Deus
    Nov 17, 2004
  2. cylin
    Replies:
    13
    Views:
    5,788
    Larry Brasfield
    Oct 24, 2004
  3. Replies:
    2
    Views:
    631
    Joe Kesselman
    Nov 16, 2006
  4. cylin

    rand() function doesn't work well??

    cylin, Oct 22, 2004, in forum: C Programming
    Replies:
    15
    Views:
    772
    Merrill & Michele
    Oct 24, 2004
  5. =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=

    [Mozilla from IDE] hangs on XML not well-formed

    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=, Jun 12, 2007, in forum: ASP .Net
    Replies:
    7
    Views:
    383
Loading...

Share This Page