Adding function to DOM generated link

[tdellaringa]

Hi there,

I'm adding a link inside a DIV dynamically on my page using the DOM. This link needs to have a function tied to the onclick event handler. If I remember correctly, you cannot do this using .setAttribute - is that correct? (IE doesn't see it)

I had thought then you added it using the property of the object:

myLink.onclick = functionName; ( with or without the brackets?)

But this doesn't seem to work. My problem is compounded by the fact that I want the link to return false: The link should be this:

<a href="" onclick="toggleHelp();return false">Page Help</a>

Do I have to write this as an anonymous(?) function like:

myLink.onclick = function { statements here }

I'm rusty on this stuff it has been awhile, I can't remember the correct way. I also don't see a way to add the return false, or maybe 'return toggleHelp()' then return false in the function...still how would I add the return?

Thanks

Tom

[codegoboom]

Yeah, events are anonymous functions (typeof function), created from strings during parsing (setting outerHTML causes this, as may createElement(html-markup...)).

So, in general, they must be assigned as functions: function(){//code...}, or new Function("string"); these work with setAttribute, as well.

attachEvent is another option for IE.

[glenngv]

myLink.onclick = function() { toggleHelp();return false;}

[Olivier]

Why don't put the return false; on the toggleHelp(); function ?


function toggleHelp() {
doSomething;
doAnOtherThing;
return false;
}

And your HTML became

<a href="" onclick="javascript:toggleHelp();">


But, external script could be better than a onclick attribute on your HTML :)

[Kor]

Why don't put the return false; on the toggleHelp(); function

It doesn' matter, it is quite the same


And your HTML became
<a href="" onclick="javascript:toggleHelp();">

In fact the "vitual" HTML became

<a href="" onclick="toggleHelp()">

But, external script could be better than a onclick attribute on your HTML

Not exactly, there are some disadvantages as well. For instance if the code is a little bit more intricate, such as

object.onclick = function(){
toggleHelp(this);
}

This closure could act like a garbage and will progressively drive to a lack of free memory.

[tdellaringa]

myLink.onclick = function() { toggleHelp();return false;}

Ugh - that is what I wanted but I get no cursor! The link works and everything, but there is no visual cue. Even the link does not underline as normal.

I did it kind of old school way:

oHelpLink.setAttribute("href","javascript:void toggleHelp()");

It's ugly but it works, the void effectively giving me my return false. Bleg.

[glenngv]

Ugh - that is what I wanted but I get no cursor! The link works and everything, but there is no visual cue. Even the link does not underline as normal.

Did you also set the href attribute? If not, it becomes an anchor and not hyperlink, thus the cursor is not a pointer.

oHelpLink.setAttribute("href", "#");
oHelpLink.onclick = function() { toggleHelp();return false;}

[tdellaringa]

Thanks, that was exactly it :)