how to set all links(href) in the page to "#" with javascript

Question

Do you want to set all `` elements' `href` attribute to '#' or all anchor (``) elements' `href` attribute to '#'? — Cᴏʀʏ, Aug 18 '10 at 13:01
Why would you do something this evil? This breaks my beloved middle click. — strager, Aug 18 '10 at 13:03
@Cory Larson, It doesn't make much sens to set a ``'s `href` to `#`, does it? — strager, Aug 18 '10 at 13:04
Don't do that, please. It kills the ability to view the link with a mouse over, and kills the ability to middle or right click the link. Instead, bind to the on-click event for the link and return false to prevent the browser from following the link... — ircmaxell, Aug 18 '10 at 13:09
@strager: No, it doesn't make sense, and I know what he meant, but it's not __crystal__ clear. A beginner finding their way to this post might be confused when the OP writes "links" and really meant "hyperlinks" or "anchors". — Cᴏʀʏ, Aug 18 '10 at 13:10
@Cory Larson, I don't think many web programmers would think `` the first time they read "set links (href) in the page". I don't think many beginning web programmers would think that, either. — strager, Aug 18 '10 at 13:16
Instead of arguing over pedantry, how about upvoting my answer to the top so the OP doesn't commit this evil? ;) — Peter Boughton, Aug 18 '10 at 13:26

score 6 · Answer 1 · answered Aug 18 '10 at 13:23

DON'T CHANGE HREF TO #

Set the onclick function to return false instead.

This will have the same effect, whilst allowing greater usability.

Here's a quick example (using jQuery, but works with anything):

jQuery('a').click( doStuff );

function doStuff()
{
    // ...function body...

    return false;
}

This works because the value you return from an onX event function determines whether that event continues firing or stops. Return true to allow it to continue or false to stop it.

With onclick this means the click is stopped (so the link isn't followed) - however it still allows people to interact with the link via middle and right click (e.g. opening in new tab, adding to bookmarks, and so on)

For another example, with onkeypress you can return false to prevent the character typed from being added to an input control (for example, you could mimic the HTML5 input="numeric" control by having an onkeypress that returned false for any non-numeric characters).

Then don't use jQuery. The concept of returning true/false is core JavaScript. I don't bother remembering the two or three different ways of binding methods, so I used jQuery for simplicitly. — Peter Boughton, Aug 18 '10 at 14:31

score 3 · Answer 2 · answered Aug 18 '10 at 13:01

3

Using jQuery:

$('a').attr('href', '#');

answered Aug 18 '10 at 13:01

stusmith

14,003
7
56
89

score 2 · Accepted Answer · edited Aug 18 '10 at 21:50

2

Use the getElementsByTagName() method to get the tags, then loop through them to set the property.

var links = document.getElementsByTagName("a");

for (var link in links)
{
    links[link].href = "#";
}

EDIT: To satisfy a non "foreach" method.

var links = document.getElementsByTagName("a");

for(i=0;i<links.length;i++) 
{
    links[i].href = "#";
}

edited Aug 18 '10 at 21:50

strager

88,763
26
134
176

answered Aug 18 '10 at 13:01

Joel Etherton

37,325
10
89
104

`for..in` is bad practice for [pseudo]arrays. – strager Aug 18 '10 at 13:03
@strager - documentation? reason? – Joel Etherton Aug 18 '10 at 13:03
Don't use `for( i in ... )` to loop over array-like objects, e.g. NodeLists. – James Aug 18 '10 at 13:03
Also, your code is wrong: the inner part of the loop should read `links[link].href`, not `link.href`. `link` is the index. – strager Aug 18 '10 at 13:06
@Joel, a) it's slow (Really slow) b) It'll loop over any items added to the prototype (which isn't what you want). – James Aug 18 '10 at 13:06
@Joel Etherton, See [Why is using "for ...in" with array iteration such a bad idea?](http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays) – strager Aug 18 '10 at 13:07
@strager, @J-P thanks for the references. I will read. @strager, no var link creates the reference not an index (this array is not associative). I've used similar code to generate elements. – Joel Etherton Aug 18 '10 at 13:10
@Joel Etherton, Blasphemy! `link` is the index. I just checked. – strager Aug 18 '10 at 13:14
You're not declaring `i` and you should *cache* the `length` of the array in another var. – James Aug 19 '10 at 09:13

how to set all links(href) in the page to "#" with javascript

3 Answers3