Using JavaScript variable inside an anchor tag's href attribute

Question

Consider I have a JavaScript variable named link which contains a URL like this: www.google.com. I need to include this variable in href attribute in 2 places, like:

<a href="link">link</a>

This should return something like this: Google

I tried various ways but failed. Is it possible to do like this? The JavaScript variables should be used at both places.

Note: I need to use the variable inside <a> tag also

I tried various ways but failed Could you at least show us 2 of your tries? — asprin
– asprin, Commented May 27, 2014 at 7:57
I tried something like this: var link = "www.google.com"; document.write("<a href=\"" + link + "\">" + link + "</a>"; I got the above method from here: stackoverflow.com/questions/2121491/how-to-add-a-var-to-href — user3678812
– user3678812, Commented May 27, 2014 at 8:02
@user3678812 please update your question and add the additional info there, so that any future readers can understand the problem easily.. — T J
– T J, Commented May 27, 2014 at 8:05
@user3678812 do you have the text that should be updated inside the link, or do we have to extract it from the link..? — T J
– T J, Commented May 27, 2014 at 8:22

T J · Accepted Answer · 2021-05-02 23:50:59Z

8

Assume you have the following in your HTML

<a href="link" class='dynamicLink'>link</a>
<a href="link" class='dynamicLink'>link</a>

You can do the following

var href = 'http://www.google.com'; //any other link as wish
var links = document.getElementsByClassName('dynamicLink');

Array.from(links).forEach(link => {
  link.href = href;
  link.innerHTML = href.replace('http://', '');
});

JSFiddle

edited May 2, 2021 at 23:50

answered May 27, 2014 at 8:04

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

6 Comments

Nitish Dhar Over a year ago

href should be absolute URL with http://. the value you have given will not work.

T J Over a year ago

@NitishDhar the variable is for demo purpose. it has nothing to do with the solution, it can be anything the OP wants, IT CAN EVEN BE AN INTERNAL LINK like #demo

Nitish Dhar Over a year ago

I just specified that this is a very common mistake people make while giving href & wanted to point that out. Please update your answer I will be able to upvote the answer.

T J Over a year ago

@NitishDhar updated as you mentioned for better understanding.. :)

user3678812 Over a year ago

@TJ this code almost worked. but when I implemented it, instead of going to www.google.com, it is going to github.io/www.google.com. It is acting as a sub url. I am getting a result like currentsite.com/www.google.com. Rest all is good. How can I tackle this ?

|

Radhakrishna Rayidi · Accepted Answer · 2014-05-27 10:05:46Z

6

You can use the following code.

<a id="myLink" href="link">link</a>

in your javascript try

<script>
    var link = "http://www.google.com/";
    document.getElementById('myLink').setAttribute("href",link);
    document.getElementById('myLink').innerHTML = link;
    // Here the link is your javascript variable that contains the url.
</script>

edited May 27, 2014 at 10:05

answered May 27, 2014 at 8:02

Radhakrishna Rayidi

5202 gold badges10 silver badges24 bronze badges

3 Comments

Gwenc37 Over a year ago

I think he wants to add the content of the var link inside the tag <a> too.

Radhakrishna Rayidi Over a year ago

@user3678812 To get rid of the confusion edit your question and paste the entire html or javascript code what you're using. So we'll get what you exactly you want

Radhakrishna Rayidi Over a year ago

@user3678812 I've updated the code little bit. Let me know is this what you're looking for ?

Gwenc37 · Accepted Answer · 2014-05-27 08:06:16Z

0

Sorry for any typo. Writing on my phone. Can't you create the anchor on the fly?

anchor =Document.createElement (...)
anchor.href=yourvar-value
anchor.innerText=your-value?

If a more complex thing is needed search for javascript databiding on Google

Take care

edited May 27, 2014 at 8:06

Gwenc37

2,0467 gold badges19 silver badges22 bronze badges

answered May 27, 2014 at 8:05

Rui Lima

7,5134 gold badges33 silver badges42 bronze badges

Comments

Nitish Dhar · Accepted Answer · 2014-05-27 08:04:54Z

-1

You can do it like this -

WORKING DEMO - http://codepen.io/nitishdhar/pen/rJLEH

HTML Part

<a href="" class="link">Link will be filled by javascript</a>

You need to place a specific class in the a tag. We will need this to get hold of this element from jQuery.

Javascript Part (Using jQuery)

var link = "http://google.com";
$(document).ready(function(){
  $('.link').attr('href', link);
});

We need to create a variable, link, which will hold the URL you want to assign to the a tag. Then on document ready, we get hold of the a element & update its href attribute with the link.

answered May 27, 2014 at 8:04

Nitish Dhar

2,31217 silver badges18 bronze badges

2 Comments

user3678812 Over a year ago

instead of "Link will be filled by javascript", I need to print the value of var link there too. Howcan I modify this code to achieve that ?

Nitish Dhar Over a year ago

@user3678812 - you can only use javascript variables in javascript code block. So the only way to make a value of a javascript variable reach your html element, you need to do that from javascript i. you will have to modify the html element from javascript only

Hamster · Accepted Answer · 2014-05-27 08:28:33Z

-1

You can do this easy by jquery.

1st give your a class/id.

<a class="mylink">link</a>

Then you can do something like:

<script  type='text/javascript'>

$(document).ready(function () {
   $("a.mylink").attr("href", link);
});

</script>

If you want the text to change as well you will have to add

$("a.mylink").text(link);

to $(document).ready as well.

See it working: http://jsfiddle.net/symXp/

edited May 27, 2014 at 8:28

answered May 27, 2014 at 8:03

Hamster

6807 silver badges23 bronze badges

6 Comments

user3678812 Over a year ago

I need to use the variable inside the <a> tag also.

Hamster Over a year ago

can you create a jsfiddle or something so we can see exactly what sort of thing it is that you need

user3678812 Over a year ago

If I use your code, it will print "link" which when clicked will take me to the url saved in the variable. Instead of that, I need to print the variable itself like : www.google.com and when clicked, it should go to that destination. I can't use any strings. I have to use the variable always.

Hamster Over a year ago

then do something like $("a.mylink").text(link); in document.ready

user3678812 Over a year ago

@Hamster in the working example link, you have initialized the variable inside the function. But in my case it is a global javascript variable which intakes user input. When I used the global variable in your code, it didn't work !

|

Collectives™ on Stack Overflow

Using JavaScript variable inside an anchor tag's href attribute

5 Answers 5

6 Comments

3 Comments

Comments

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

3 Comments

Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related