Adding "onclick" property to an "a" tag dynamically with javascript.

[ravil baizhiyenov]

Hi everyone,

This problem is really frustrating because I understand that it is quite simple stuff, but I can't find the solution!
I know that to add a onclick property I need to use code like the following:

element.onclick = function() {callSomeFunction();};

However, I can't make it worj in the following chunk of code:

var paging_div = document.getElementById("paging");
		
		var first_link = document.createElement("a");
		first_link.href = "";
		first_link.id = "paging_first";
		first_link.innerHTML = "First";
		paging_div.appendChild(first_link);
		paging_div.innerHTML += " ";
		document.getElementById("paging_first").onclick = function(){alert(); return false;};
		
		var last_link = document.createElement("a");
		last_link.href = "";
		last_link.id = "adas";
		last_link.innerHTML = "Last";
		paging_div.appendChild(last_link);
		paging_div.innerHTML += " ";
		document.getElementById("adas").onclick = function(){alert();};

I will be using this code to create links to different pages for the search results. Off course, instead of alert(); I will insert a call to a proper function.
So the problem is that only the "Last" link works..

If I comment the "Last" link section out the onclick works for the first one...

I don't really know what is up with it...

Would appreciate your help! Please point where I have an absolutely stupid mistake...

[Eric Pascarello]

why are you adding the onclick with getElementById? You already have the object last_link

last_link.onclick = function()

also you should not make href equal to nothing. Make it equal to an empty #

Next you should not be adding a whitespace like that. Either add a textNode or use css margins/padding on the links

Eric

[ravil baizhiyenov]

Hi Eric, thanks for your reply!

I think I just reused a piece of existing code, so that's why the "document.getElementById".
I will change it though. I think i didn't really catch that, was a little tired =).

I have had href equal nothing on a lot of my "a" elements... Can you please explain why should I have it equal to "#" instead?

Thanks for the suggestion on the whitespace, I will change it. Although I don't think that these changes will make it work...
Will reply when I test the code tomorrow morning.

Thanks again!

[ravil baizhiyenov]

ok... well basically I had a wrong id for the last link, that's a pretty silly mistake...

And also, it wasn't working because I was adding an empty space by using

paging_div.innerHTML += " ";

Thanks a lot for your reply, Eric. It helped me a lot. However, can you please tell me why I can't append a space using my method?

[Eric Pascarello]

createTextNode

Eric

[Eric Pascarello]

Some browsers will not render it as a link without something in the href. That means you would not get hover, will not be able to tab to it, etc

Eric

[Eric Pascarello]

Just CSS:

<a >HEY</a><a  style="padding-right: 10px">HEY</a><a >HEY</a>

Eric

[ravil baizhiyenov]

Thank you Eric, you were very helpful!