Using Elements Created on the fly

Discussion in 'Javascript' started by Michael Hill, Jan 28, 2004.

  1. Michael Hill

    Michael Hill Guest

    I created an element on-the-fly using javascript like:

    myA=document.createElement("A");
    myA.href="Javascript:acton(this)";
    myA.className = "smallLink";
    myText=document.createTextNode('sometext');
    myA.appendChild(myText);

    Then when I pressed the link I'd like to change the 'className' of this
    link from 'smallLink' to 'biggerLink', but nothing happens.

    function action(obj)
    {
    //alert(obj);
    obj.className="biggerlink";
    }

    When I look at alert(obj) I get "[object]".
    When I look at alert(obj.className) I get "undefined".

    Anyone know what I am doing wrong here?

    Mike
     
    Michael Hill, Jan 28, 2004
    #1
    1. Advertising

  2. Maybe

    return obj.className="biggerlink";

    --
    George Hester
    __________________________________
    "Michael Hill" <> wrote in message news:...
    > I created an element on-the-fly using javascript like:
    >
    > myA=document.createElement("A");
    > myA.href="Javascript:acton(this)";
    > myA.className = "smallLink";
    > myText=document.createTextNode('sometext');
    > myA.appendChild(myText);
    >
    > Then when I pressed the link I'd like to change the 'className' of this
    > link from 'smallLink' to 'biggerLink', but nothing happens.
    >
    > function action(obj)
    > {
    > //alert(obj);
    > obj.className="biggerlink";
    > }
    >
    > When I look at alert(obj) I get "[object]".
    > When I look at alert(obj.className) I get "undefined".
    >
    > Anyone know what I am doing wrong here?
    >
    > Mike
    >
     
    George Hester, Jan 29, 2004
    #2
    1. Advertising

  3. "Michael Hill" <> wrote in message
    news:...
    <snip>
    > myA=document.createElement("A");
    > myA.href="Javascript:acton(this)";
    > myA.className = "smallLink";
    > myText=document.createTextNode('sometext');
    > myA.appendChild(myText);

    <snip>
    > function action(obj)
    > {
    > //alert(obj);
    > obj.className="biggerlink";
    > }

    <snip>

    Javascript pseudo protocol HREFs are not methods of the created object
    and are executed in the global scope, so - this - refers to the global
    object and setting/creating a - className - property on the global
    object is pointless.

    You should never use javascript pseudo protocol HREFs:-

    <URL: http://jibbering.com/faq/#FAQ4_24 >

    - but to solve your specific problem you need to assign an onclick
    method to the created object instead (though you will need the link to
    have a HREF else it will not be a link, but then it probably could be a
    SPAN element instead). E.g.:-

    myA.onclick = function(){
    this.className="biggerlink";
    return false;
    }

    - or -

    myA.onclick = new Funciton("this.className=\"biggerlink\";return
    false;");

    - depending on whether you understand the consequences of assigning an
    inner function to an event handler or not (and/or whether the ECMA
    Script compact profile will be relevant).

    Richard.
     
    Richard Cornford, Jan 29, 2004
    #3
  4. "Michael Hill" <> wrote in message
    news:...
    >>
    >>- but to solve your specific problem you need to assign an
    >>onclick method to the created object instead (though you will
    >>need the link to have a HREF else it will not be a link, but
    >>then it probably could be a SPAN element instead). E.g.:-
    >>
    >>myA.onclick = function(){
    >> this.className="biggerlink";
    >> return false;
    >>}


    > Are you suggesting I change to something like:
    >
    >mySPAN=document.createElement("SPAN");
    >mySPAN.className = "smallLink";
    >mySPAN.onclick = new Function("this.className=\"biggerlink\";
    >return false;");


    I assume you realise that the preceding line should not wrap.

    > myText=document.createTextNode('sometext');
    >mySPAN.appendChild(myText);


    I don't have enough information about the context to make that
    judgement. But the original code seemed to be attempting to create an
    element that, when clicked on, change CSS styles but did nothing else
    and given that browsers that support creating new elements also support
    onclick events on most elements (including SPANs) a SPAN element might
    be better suited to the task.

    The important things are to never use a javascript pseudo-protocol HREF
    if it is not going to directly result in the replacement of the current
    page, and that if you want to refer to an element with the - this -
    keyword you can only do so from within a function that is a method of
    the element, not code that is executed in the global context as a side
    effect of clicking on it. (and never even consider doing anything
    proposed by George Hester. Doing the opposite, or just banging your head
    on a desk a few times, would always be more productive.)

    Beyond that the type of element used depends on the design and
    specification for the task. But an A element has inherent behaviour that
    users understand an indicating a link with which they can navigate to
    another page and undermining the user's expectation is generally not
    considered good UI design.

    Richard.
     
    Richard Cornford, Jan 29, 2004
    #4
  5. Jesus Richard why continue bashing me? What's the purpose? I been bashed I been made to eat dog meat you won! Are you a happy camper now? What's wrong with you? You don't like me that's fine. You need to tesase like a juvinelle. Are you that insecure that all in the world must know you dislike like? Grow up man!@!!

    --
    George Hester
    __________________________________
    "Richard Cornford" <> wrote in message news:bvb5su$feu$1$...
    > "Michael Hill" <> wrote in message
    > news:...
    > >>
    > >>- but to solve your specific problem you need to assign an
    > >>onclick method to the created object instead (though you will
    > >>need the link to have a HREF else it will not be a link, but
    > >>then it probably could be a SPAN element instead). E.g.:-
    > >>
    > >>myA.onclick = function(){
    > >> this.className="biggerlink";
    > >> return false;
    > >>}

    >
    > > Are you suggesting I change to something like:
    > >
    > >mySPAN=document.createElement("SPAN");
    > >mySPAN.className = "smallLink";
    > >mySPAN.onclick = new Function("this.className=\"biggerlink\";
    > >return false;");

    >
    > I assume you realise that the preceding line should not wrap.
    >
    > > myText=document.createTextNode('sometext');
    > >mySPAN.appendChild(myText);

    >
    > I don't have enough information about the context to make that
    > judgement. But the original code seemed to be attempting to create an
    > element that, when clicked on, change CSS styles but did nothing else
    > and given that browsers that support creating new elements also support
    > onclick events on most elements (including SPANs) a SPAN element might
    > be better suited to the task.
    >
    > The important things are to never use a javascript pseudo-protocol HREF
    > if it is not going to directly result in the replacement of the current
    > page, and that if you want to refer to an element with the - this -
    > keyword you can only do so from within a function that is a method of
    > the element, not code that is executed in the global context as a side
    > effect of clicking on it. (and never even consider doing anything
    > proposed by George Hester. Doing the opposite, or just banging your head
    > on a desk a few times, would always be more productive.)
    >
    > Beyond that the type of element used depends on the design and
    > specification for the task. But an A element has inherent behaviour that
    > users understand an indicating a link with which they can navigate to
    > another page and undermining the user's expectation is generally not
    > considered good UI design.
    >
    > Richard.
    >
    >
     
    George Hester, Jan 29, 2004
    #5
  6. On Thu, 29 Jan 2004 15:37:07 GMT, George Hester <>
    wrote:

    [Fixed and trimmed top-post]

    > "Richard Cornford" <> wrote in message
    > news:bvb5su$feu$1$...
    >
    >> The important things are to never use a javascript pseudo-protocol
    >> HREF if it is not going to directly result in the replacement of
    >> the current page, and that if you want to refer to an element with
    >> the - this - keyword you can only do so from within a function that
    >> is a method of the element, not code that is executed in the global
    >> context as a side effect of clicking on it. (and never even
    >> consider doing anything proposed by George Hester. Doing the
    >> opposite, or just banging your head on a desk a few times, would
    >> always be more productive.)

    >
    > Jesus Richard why continue bashing me? What's the purpose? I been
    > bashed I been made to eat dog meat you won! Are you a happy camper
    > now? What's wrong with you? You don't like me that's fine. You
    > need to tesase like a juvinelle. Are you that insecure that all in
    > the world must know you dislike like? Grow up man!@!!


    Actually, I believe the point of Mr Cornford's comments were to warn the
    OP against following your useless advice. Did you actually try your
    suggestion? I doubt it, for if you did, you would find that the entire
    page would be replaced by the text, biggerlink. I might normally attempt
    to explain why but the last time I offered you the explanation to a
    problem, you told me, though more tersely, to f*** myself.

    Mr Cornford's remarks about the OP "banging his head" are quite correct;
    it would have been more productive than your suggestion. At least the OP
    would only have the current situation to continue with, not the added
    worry of why his page suddenly disappeared.

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, Jan 29, 2004
    #6
  7. Michael Hill

    Michael Hill Guest

    > Javascript pseudo protocol HREFs are not methods of the created object
    > and are executed in the global scope, so - this - refers to the global
    > object and setting/creating a - className - property on the global
    > object is pointless.
    >
    > You should never use javascript pseudo protocol HREFs:-
    >


    Richard,

    I was thinking about this some more and I thought I'd let you know that I
    totally agree. I am using this though to open another window so it should
    be ok to use a link in this case.

    Here's that code modified some more:

    I happen to be iterating over an array and producing some rows here,
    putting in a link because I want the use to be able to click on them and
    open a window:

    <snip>
    myA=document.createElement("A");
    myA.href="Javascript:void();"
    myA.className = "smallLink";
    //here I am creating bogus attributes and tieing them to the link object,
    I'll need them later
    myA.tmp1 = child_array[j][i-2]; // this is the parent number that is
    key in the database
    myA.tmp2 = child_array[j][i-1]; // this is the child number that is
    also part of the key in the database
    myA.onclick = function (evt) { this.className="smallred";
    edit_action(this.tmp1,this.tmp2); return false; };
    // this is the text title
    myText=document.createTextNode(child_array[j]);
    // Appends the text node to the td
    myA.appendChild(myText);
    <snip>

    function edit_action(p_id,id)
    {
    var win = window.open("somepgm?p_num="+p_id+"&c_num="+id,<snip>
    win.focus();
    }

    1) do you think this is a proper use, now?
    2) this code works, but doesn't change the color of the link until after
    the window opens. I want the link to change color immediately so the user
    knows "something" is happening. Sometimes it takes the users window a min
    to open. I don't want the user to be clicking on this over and over.

    Thanks for your comments.

    Mike
     
    Michael Hill, Jan 29, 2004
    #7
  8. "George Hester" <> wrote in message
    news:DM9Sb.611$...
    >Jesus Richard why continue bashing me? What's the purpose?

    <snip>

    As Mr Winter correctly surmised, my comments were intended as a warning
    to the OP rather than a superfluous effort to bash you.

    You have made it abundantly clear (by belittling and directly insulting
    everyone who has ever offered you any good advice here) that you are
    completely confident in the validity of your coding style. Based as it
    is on scouring the Internet and newsgroups for any old half-ass hack
    that superficially satisfies your criteria for a solution and then
    jamming them into web pages without any real understanding of the code
    used, its mechanism or the consequences. And that you don't see any need
    to do anything differently.

    Eventually its inevitable consequences will demonstrate to you why your
    whole approach is so spectacularly wrong. And when that happens the only
    people left willing to talk to you will not be capable of doing any more
    than offering you more half-ass hacks, as you have already reached a
    position where none of the people on this group who know how to properly
    implement a browser script are willing to bother with you at all. And
    you have stated that that suites you just fine.

    But as your hack agglomerate approaches its inevitable fatal complexity
    threshold you are inventing fairy tails to explain the artefacts of the
    ensuing chaos, and as a result are in the unique position of knowing
    less and less about browser scripting as time goes by.

    There is nothing that can be done about that (and ever less people
    willing to try). That doesn't matter, you can rattle about in your own
    misconceptions to you harts content. But when you start bothering other
    people with your nonsense they deserve to be warned that the best that
    they can expect from you is the worst approach available, that normally
    what you say is an baseless fantasy and at worst your suggestions will
    be positively harmful.

    Richard.
     
    Richard Cornford, Jan 29, 2004
    #8
  9. "Michael Hill" <> wrote in message
    news:...
    <snip>
    > myA=document.createElement("A");
    > myA.href="Javascript:void();"


    It is probably harmless here because the onclick handler returns false
    and cancels the navigation and without JavaScript enabled the A element
    will never be created but javascript pseudo-protocol HREFs really should
    be avoided as a matter of habit.

    >myA.className = "smallLink";
    >//here I am creating bogus attributes and tieing them to
    >//the link object, I'll need them later
    >myA.tmp1 = child_array[j][i-2]; // this is the parent
    > //number that is key in the database
    >myA.tmp2 = child_array[j][i-1]; // this is the child
    > //number that is also part of the key in the database


    >myA.onclick = function (evt) { this.className="smallred";
    >edit_action(this.tmp1,this.tmp2); return false; };


    This is OK so long as you are aware that assigning an inner function as
    an event handler will produce a closure and that has implications
    (particularly provoking the memory leak bug on IE browsers).

    If you are creating numerous A elements with identical onclick functions
    and having them retrieve the data they need from expando properties on
    those elements then you could create a separate named function
    definition and assign a reference to it to the onclick properties.


    > // this is the text title
    > myText=document.createTextNode(child_array[j]);
    > // Appends the text node to the td
    >myA.appendChild(myText);
    ><snip>
    >
    > function edit_action(p_id,id)
    > {
    > var win = window.open("somepgm?p_num="+
    > p_id+"&c_num="+id,<snip>


    Not all browsers support a window.open function and calling it
    unverified on one of those browsers will generate an error.

    > win.focus();
    > }
    >
    >1) do you think this is a proper use, now?


    Yes, in principal if clicking on a link is going to result in the
    display of a new page then that is probably within the expectations of
    the users, even if that page is in a new window. Of course they may
    still be confused if they happen to be operating a pop-up blocker or a
    browser with that feature built in.

    Generally the issues surrounding the consequences of the common use of
    pop-up blocking mechanisms makes me always recommend never even
    attempting to open a new window with a script. Even the most reliable
    window opening script ever presented on this group is nowhere near
    reliable enough for practical use.

    >2) this code works, but doesn't change the color of the link
    >until after the window opens. I want the link to change color
    >immediately so the user knows "something" is happening.
    >Sometimes it takes the users window a min to open. I don't
    >want the user to be clicking on this over and over.


    You could experiment with using onmousedown to set the className for the
    element and onclick to open the new window, or a CSS style for the
    active link but it might just be that the browser/system is too busy
    opening the new window to re-draw the existing one with the new styles.

    It has been observed that changing the className property of an element
    causes the browser to do considerably more work than would be required
    by just making the relevant changes to the element's style object.

    But I would not expect a long delay between opening a new window and its
    contents starting to download to delay re-drawing of the original
    window, there should be sufficient system resources available for the
    existing window to be re-drawn while the new window is waiting for a
    response to its initial request.

    Richard.
     
    Richard Cornford, Jan 29, 2004
    #9
  10. Michael Hill

    Michael Hill Guest

    >
    > If you are creating numerous A elements with identical onclick functions
    > and having them retrieve the data they need from expando properties on
    > those elements then you could create a separate named function
    > definition and assign a reference to it to the onclick properties.
    >
    >


    Richard,

    Yes I am, each is the same except for the combination of parent/child that
    is passed.

    Can you give me an example of what you are talking about here?

    Mike
     
    Michael Hill, Jan 29, 2004
    #10
  11. Michael Hill

    Michael Hill Guest

    > >myA.className = "smallLink";
    > >//here I am creating bogus attributes and tieing them to
    > >//the link object, I'll need them later
    > >myA.tmp1 = child_array[j][i-2]; // this is the parent
    > > //number that is key in the database
    > >myA.tmp2 = child_array[j][i-1]; // this is the child
    > > //number that is also part of the key in the database

    >
    > >myA.onclick = function (evt) { this.className="smallred";
    > >edit_action(this.tmp1,this.tmp2); return false; };

    >
    > This is OK so long as you are aware that assigning an inner function as
    > an event handler will produce a closure and that has implications
    > (particularly provoking the memory leak bug on IE browsers).


    Do you know of a better way to assign these values?

    Mike
     
    Michael Hill, Jan 29, 2004
    #11
  12. Michael Hill

    Michael Hill Guest

    > You could experiment with using onmousedown to set the className for the
    > element and onclick to open the new window, or a CSS style for the
    > active link but it might just be that the browser/system is too busy
    > opening the new window to re-draw the existing one with the new styles.


    onmousedown works great!

    Mike
     
    Michael Hill, Jan 29, 2004
    #12
  13. "Michael Hill" <> wrote in message
    news:...
    <snip>
    >>>myA.onclick = function (evt) { this.className="smallred";
    >>>edit_action(this.tmp1,this.tmp2); return false; };

    >>
    >>This is OK so long as you are aware that assigning an inner
    >>function as an event handler will produce a closure and that
    >>has implications (particularly provoking the memory leak bug
    >>on IE browsers).

    >
    > Do you know of a better way to assign these values?


    The method I posted to your preceding question is probably the safest
    method with the least potential side effects (probably none). But better
    or best would depend on the circumstances/context. I could probably come
    up with 20-odd variations on assigning event handlers to elements, many
    of them involving closures/inner functions and probably each well suited
    to one context or another.

    Richard.
     
    Richard Cornford, Jan 30, 2004
    #13
  14. "Michael Hill" <> wrote in message
    news:...
    >>... create a separate named function definition and
    >>assign a reference to it to the onclick properties.

    >
    > Richard,
    >
    >Yes I am, each is the same except for the combination of
    >parent/child that is passed.
    >
    >Can you give me an example of what you are talking about
    >here?


    function forA_OnClick(evt){
    edit_action(this.tmp1,this.tmp2);
    return false;
    }
    function forA_OnMouseDown(){
    this.className="smallred";
    }

    Then later in the function that creates the elements:-

    myA.onclick = forA_OnClick;
    myA.onmousedown = forA_OnMouseDown;

    One function object is created for each function definition (in the
    global scope) and then the name of the function is used to assign a
    reference to that function object to the corresponding event handlers of
    each A element created. No matter how many A elements are created they
    all share references to the same function objects but the functions are
    executed as methods of the elements so - this - always refers to the
    element on which the handler is being called. Because the functions are
    defined as global functions they are not inner function so assigning
    references to them do not form closures.

    Richard.
     
    Richard Cornford, Jan 30, 2004
    #14
  15. "Richard Cornford" <> writes:
    > This is OK so long as you are aware that assigning an inner function as
    > an event handler will produce a closure and that has implications
    > (particularly provoking the memory leak bug on IE browsers).


    Could you direct me to a reference? I didn't have much luck with
    Google.

    --
    Chris Jeris Apply (1 6 2 4)(3 7) to domain to reply.
     
    Christopher Jeris, Jan 30, 2004
    #15
  16. "Christopher Jeris" <> wrote in message
    news:...
    <snip>
    >>(particularly provoking the memory leak bug on IE browsers).

    >
    >Could you direct me to a reference? I didn't have much
    >luck with Google.


    Didn't you? You used the "Advance Search" page on groups.google.com to
    search specifically comp.lang.javascirpt with the keywords "memory
    leak"? It should have turned up at least two extensive discussions of
    the problem with demonstration code, explanations and some solutions.

    (maybe also worth searching microsoft.public.scripting.jscript as it has
    been mentioned there also, though not in as much detail.)

    Let me know if you cannot locate the threads on groups.google.com and I
    will look them up myself and post the URLs later (much later, as I will
    be busy for the next 5 or 6 hours).

    Richard.
     
    Richard Cornford, Jan 30, 2004
    #16
  17. "Richard Cornford" <> writes:
    > Didn't you? You used the "Advance Search" page on groups.google.com to
    > search specifically comp.lang.javascirpt with the keywords "memory
    > leak"?


    No, I'm just stupid, as usual.

    --
    Chris Jeris Apply (1 6 2 4)(3 7) to domain to reply.
     
    Christopher Jeris, Jan 30, 2004
    #17
    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. Vikram
    Replies:
    6
    Views:
    654
    Vikram
    Apr 7, 2005
  2. Ultrus
    Replies:
    4
    Views:
    2,717
    Stefan Behnel
    Aug 30, 2007
  3. Arpan

    Viewing A DataSet Created On The Fly!

    Arpan, Dec 13, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    144
    Debasish Bose
    Dec 16, 2004
  4. Brian

    Fly outmenu on the fly

    Brian, Apr 8, 2005, in forum: Javascript
    Replies:
    0
    Views:
    118
    Brian
    Apr 8, 2005
  5. Replies:
    2
    Views:
    100
    Walton
    Feb 20, 2007
Loading...

Share This Page