get the href value

[psilos]

Hello,

I am trying to implement something like this but no lack in my code:



var deadlinks=document.getElementsByTagName("a");
for (var i=0;i<deadlinks.length;i++){
if(deadlinks[i].href == '#') {
deadlinks[i].onclick = openModal;
}
}


What i'm trying to achieve is get all dead links with an href="#" value and assign to them a function.

[Trinithis]

That should work, but a another way of assigning functions to anchors is using javascript:void(statement[s]):


<a href="javascript:void(alert('clicked'); var x=9; alert(x*3);)">Click Me</a>

Unless you are using the this keyword in your onclick, I think this is a better way of doing things.

[Twey]

It's not. It's a very poor way of doing things. It's an abuse of both the href attribute and the javascript: pseudo-URL scheme. Links with href attributes are meant to direct the browser somewhere, and at least IE assumes this and begins closing down the page ready to load a new page, by stopping animated images for example.

Furthermore, if you have links calling Javascript to which you can apply no more appropriate fallback than "#", then the chances are they shouldn't be links at all.

[Trinithis]

The main reason why I don't like "#" is because it messes up with the back and forward buttons, but then again, I didn't know about that IE thing.

So I guess the best thing to do could be using css to make a span class behave like a link visually and give it onclick attributes.

[Twey]

A button would be more semantically appropriate, actually. The <span> is better than using a link, though, certainly.

[riptide]

But in some cases you have to use a link. Like if need to use the tab index.

[Twey]

Buttons can have a tabindex too.

[jscheuer1]

You can mix javascript:void() and onclick, or even make custom 'javascript:' links that are informative while doing nothing else. This may not be the best way in certain respects, but causes no problems in the majority of browsers (any that I know of), and can be, as I said, informative. For example, if you have links that change images:


<a href="javascript:next()" onclick="changeImage(1);return false;">Next</a>
<a href="javascript:previous()" onclick="changeImage(-1);return false;">Previous</a>

These 'links' will never fire, but will show up in the status bar and/or other places in many browsers, giving the user information about what will happen if they click. The functions, next() and previous() don't even need to exist.

[psilos]

Well the reason i want to achieve this is because i don't want to manually add the function in every anchor tag with href="#".
If i have 15 anchor tags with href="#" in evety page, i want to assign to all of them an action.

But for some reason this
if(deadlinks[i].href == '#') is not working. Is it some way that i can get what is the value of the href??

[Twey]

The browser will convert the href to an absolute form, so you really want to check:
if(deadlinks[i].href.lastIndexOf("#") === deadlinks[i].href.length - 1)

[jscheuer1]

The browser will convert the href to an absolute form, so you really want to check:
if(deadlinks[i].href.lastIndexOf("#") === deadlinks[i].href.length - 1)

On a page called - say, some.htm, that will pick up:


<a href="index.html#">Hi</a>

as well as:


<a href="#">Hi</a>

the first of which is not a 'dead' link, though it is sloppy coding.

[Twey]

I noticed this at the time, but since I see no reason anyone would have "index.html#", I decided to not worry about it.

[psilos]

Thanks Twey..it worked for me.

Thanx also John for the tip, but i don't intend to use
<a href="index.html#">Hi</a>, so no problem. Good to know it anyway..