Using Elements Created on the fly

[Michael Hill]

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]

Maybe

return obj.className="biggerlink";

--
George Hester
__________________________________
"Michael Hill" <hi****@ram.lmtas.lmco.com> wrote in message news:40***************@ram.lmtas.lmco.com...

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

[Richard Cornford]

"Michael Hill" <hi****@ram.lmtas.lmco.com> wrote in message
news:40***************@ram.lmtas.lmco.com...
<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.

[Michael Hill]

>

- 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;
}

Richard,

Are you suggesting I change to something like:

mySPAN=document.createElement("SPAN");
mySPAN.className = "smallLink";
mySPAN.onclick = new Function("this.className=\"biggerlink\";return
false;");
myText=document.createTextNode('sometext');
mySPAN.appendChild(myText);

Mike

[Richard Cornford]

"Michael Hill" <hi****@charter.net> wrote in message
news:10*************@corp.supernews.com...

- 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]

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" <Ri*****@litotes.demon.co.uk> wrote in message news:bv*******************@news.demon.co.uk...

"Michael Hill" <hi****@charter.net> wrote in message
news:10*************@corp.supernews.com...

- 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.

[Michael Winter]

On Thu, 29 Jan 2004 15:37:07 GMT, George Hester <he********@hotmail.com>
wrote:

[Fixed and trimmed top-post]

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:bv*******************@news.demon.co.uk...

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
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Michael Hill]

> 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][i]);
// 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,<sn ip>
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

[Richard Cornford]

"George Hester" <he********@hotmail.com> wrote in message
news:DM***************@twister.nyroc.rr.com...

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]

"Michael Hill" <hi****@ram.lmtas.lmco.com> wrote in message
news:40***************@ram.lmtas.lmco.com...
<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][i]);
// 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.

[Michael Hill]

> >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]

> 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]

>

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

[Richard Cornford]

"Michael Hill" <hi****@ram.lmtas.lmco.com> wrote in message
news:40***************@ram.lmtas.lmco.com...
<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]

"Michael Hill" <hi****@ram.lmtas.lmco.com> wrote in message
news:40***************@ram.lmtas.lmco.com...

... 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.

[Christopher Jeris]

"Richard Cornford" <Ri*****@litotes.demon.co.uk> 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 cj****@oinvzer.net Apply (1 6 2 4)(3 7) to domain to reply.

[Richard Cornford]

"Christopher Jeris" <cj****@oinvzer.net> wrote in message
news:xi*************@hsph.harvard.edu...
<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.

[Christopher Jeris]

"Richard Cornford" <Ri*****@litotes.demon.co.uk> 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 cj****@oinvzer.net Apply (1 6 2 4)(3 7) to domain to reply.