Using Elements Created on the fly

[Michael Hill]

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

myA=document.cr eateElement("A" );
myA.href="Javas cript:acton(thi s)";
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.class Name) 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.lmt as.lmco.com> wrote in message news:40******** *******@ram.lmt as.lmco.com...

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

myA=document.cr eateElement("A" );
myA.href="Javas cript:acton(thi s)";
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.class Name) I get "undefined" .

Anyone know what I am doing wrong here?

Mike

[Richard Cornford]

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

myA=document.cr eateElement("A" );
myA.href="Javas cript:acton(thi s)";
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=\"big gerlink\";retur n
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.classNam e = "smallLink" ;
mySPAN.onclick = new Function("this. className=\"big gerlink\";retur n
false;");
myText=document .createTextNode ('sometext');
mySPAN.appendCh ild(myText);

Mike

[Richard Cornford]

"Michael Hill" <hi****@charter .net> wrote in message
news:10******** *****@corp.supe rnews.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=documen t.createElement ("SPAN");
mySPAN.classNa me = "smallLink" ;
mySPAN.oncli ck = new Function("this. className=\"big gerlink\";
return false;");
I assume you realise that the preceding line should not wrap.
myText=document .createTextNode ('sometext');
mySPAN.appendC hild(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*****@litote s.demon.co.uk> wrote in message news:bv******** ***********@new s.demon.co.uk.. .

"Michael Hill" <hi****@charter .net> wrote in message
news:10******** *****@corp.supe rnews.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=documen t.createElement ("SPAN");
mySPAN.classNa me = "smallLink" ;
mySPAN.oncli ck = new Function("this. className=\"big gerlink\";
return false;");

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

myText=document .createTextNode ('sometext');
mySPAN.appendC hild(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********@hot mail.com>
wrote:

[Fixed and trimmed top-post]

"Richard Cornford" <Ri*****@litote s.demon.co.uk> wrote in message
news:bv******** ***********@new s.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.******@blueyo nder.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.cr eateElement("A" );
myA.href="Javas cript: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(thi s.tmp1,this.tmp 2); 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_i d,id)
{
var win = window.open("so mepgm?p_num="+p _id+"&c_num="+i d,<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

[Richard Cornford]

"George Hester" <he********@hot mail.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.lmt as.lmco.com> wrote in message
news:40******** *******@ram.lmt as.lmco.com...
<snip>

myA=document.cr eateElement("A" );
myA.href="Javas cript: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.classNam e = "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(th is.tmp1,this.tm p2); 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.appendChil d(myText);
<snip>

function edit_action(p_i d,id)
{
var win = window.open("so mepgm?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.