How to change link HREFs via javascript

Question

I have a form where the user inputs an URL. The value resulting from that input after tweaking it a bit is the variable #url which is displayed to the user right away.

I need to make the like and tweet buttons in my site point to that URL. Making their HREFS equal to the variable #url

This are the share buttons:

<a id="twtbutton" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="theclocktwt">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<fb:like id="fbbutton" send="false" layout="button_count" width="450" show_faces="false" font="" style="position: absolute; left:110px;"></fb:like>
</div>

Here you can see how it works: http://www.chusmix.com/tests/magic.html

What appears as "Improved link" is the url I want the share buttons to use.

You're missing a lot of detail from your question. What is the keypress about? What are you trying to accomplish? Heck, what is cleanURL()? — riwalk
– riwalk, Commented Apr 26, 2011 at 4:13

Steve · Accepted Answer · 2011-04-26 04:18:13Z

37

This is what you want to do -

var yourElement = document.getElementById('yourHref');
 yourElement.setAttribute('href', '#url');

answered Apr 26, 2011 at 4:18

Steve

2,1485 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

riwalk Over a year ago

-1/2 (rounded down to 0). He obviously has jQuery, so use jQuery.

richard Over a year ago

Does it matter if he has jquery? The answer works, and the question doesn't say "using jquery".

r41n Over a year ago

Was trying this and it looks like it's working, but only in the debugger (Firefox). Doesn't matter where I place or call the script, the update isn't reflected in the browser. So in the debugger I see the updated link but the link displayed is still the old one. Same behavior in IE, and both are up-to-date.

Jonathon Philip Chambers Over a year ago

Thanks, though I don't know why you didn't instead just "document.getElementById('yourHref').setAttribute('href', '#url');"

Jonathan Grupp Over a year ago

Better legibility, I assume.

user342706 · Accepted Answer · 2011-04-26 04:13:19Z

1

Reference the following page on the jquery site:

http://api.jquery.com/attr/

Should be able to use attr('href', 'value);

answered Apr 26, 2011 at 4:13

user342706

1 Comment

styfle Over a year ago

@Liso22 The code would look like $("a").attr("href","http://example.com"); Obviously example.com is the new URL you want to replace the old one with.

Naveed Butt · Accepted Answer · 2011-04-26 04:17:50Z

0

try this:

$("#url").keypress(
    function(e) {
        if(e.keyCode == 13) {
            $("#output").attr('href', cleanURL($("#url").val()));
        }
    }
);

answered Apr 26, 2011 at 4:17

Naveed Butt

2,9197 gold badges33 silver badges58 bronze badges

1 Comment

lisovaccaro Over a year ago

I just tried it in jsfiddle and it somehow modifies the hyperlink string instead of the url it points at jsfiddle.net/Lisandro/LGwws/1

Andr3wB · Accepted Answer · 2018-03-24 01:46:07Z

0

    $('#twtbutton').prop('href', #url);
    $('#fbbutton').prop('href', #url);

This would change the 'href' property of the html element(s) with an id=twtbutton and id=fbbutton to the value stored in #url, where the value stored in #url is a string datatype. This answer utilizes the jQuery library.

edited Mar 24, 2018 at 1:46

answered Mar 22, 2018 at 23:13

Andr3wB

13 bronze badges

2 Comments

Cacoon Over a year ago

Could you provide some explanation to this answer? :D

Andr3wB Over a year ago

Sure, I stumbled upon this thread looking for an example of how to change the value of the property 'href' for a given html element to a new value. The current top ranked answer didn't quite work for me, but when I tweaked my code (using jQuery of course) to the above shown, it worked for me. So I wanted to offer this snippet in case someone else had issues with the other ranked answers like I did.

Collectives™ on Stack Overflow

How to change link HREFs via javascript

4 Answers 4

5 Comments

1 Comment

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

1 Comment

2 Comments

Linked

Related