Using a Javascript variable in HTML <a> link

Question

My code goes something like this -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>


    <script type='text/javascript'>

    var random_generator;
    document.write('Random Selection: ');
    var arr=['One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten'];
    var randomnumber=Math.floor(Math.random()*10);
    random_generator=arr[randomnumber];
    document.write(random_generator+ '<br>');


    </script>

<style type="text/css">

</style>
<a href='www.xyz.com/Index1/Index2/Variable/Index4'>Good Morning</a>
</head>
<body> 
</body>  
</html>

In place of Variable in the tag, I want to use random_generator Javascript variable. How do I do that? Thanks in Advance.

NOTE: random_generator doesn't replace the entire link. Only a part of the link (/Variable/). Depending on this value, the user is shown different pages.

In place of Variable in the href link. Different address link depending on the value of Variable ( /Variable/ ) in the href tag. — Cafecorridor
– Cafecorridor, Commented Oct 22, 2012 at 20:09

Scrimothy · Accepted Answer · 2012-10-22 20:26:28Z

7

Or maybe you could just write the link as inline js.

<script>
document.write('<a href="http://www.xyz.com/Index1/Index2/' + random_generator + '/Index4">hello</a>');
</script>

answered Oct 22, 2012 at 20:26

Scrimothy

2,53615 silver badges23 bronze badges

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

Comments

Slowcoder · Accepted Answer · 2012-10-22 20:19:52Z

1

I am not sure if i understand your problem. But the following should work if you are trying to dynamically set the link to href (assuming you are not using jquery).

<a href='http://www.xyz.com/Index1/Index2/Variable/Index4' id="index">Good Morning</a>
<script>
    var newUrl = document.getElementById('index').href;
    newUrl = newUrl.replace("Variable", random_generator);
    document.getElementById('index').href = newUrl;
</script>

answered Oct 22, 2012 at 20:19

Slowcoder

2,1303 gold badges17 silver badges21 bronze badges

Comments

redDragonzz · Accepted Answer · 2012-10-22 20:08:48Z

0

You can use jQuery to update the dom element when the script gets executed

First you must give an id to your href

<a href="#" id="myHref"

and then

$('#myHref').attr('href', variable)

Or you can change the link text var varText = "This is a link"; $('#myHref').text(varText);

answered Oct 22, 2012 at 20:08

redDragonzz

1,5912 gold badges15 silver badges33 bronze badges

2 Comments

Tsubashi Over a year ago

Or just document.getElementById

Adam Over a year ago

You mean $('#myHref').attr('href', variable) ?

Josh Bedo · Accepted Answer · 2012-10-22 20:12:04Z

0

pretty sure this will wrk

   document.getElementById('myHref').href = variable;

answered Oct 22, 2012 at 20:12

Josh Bedo

3,4723 gold badges24 silver badges33 bronze badges

Comments

David Esteves · Accepted Answer · 2012-10-22 20:14:37Z

0

As far as I know this would not be possible. You could do one of two things:

1 Change the HREF attribute when the document loads. With JQuery you could do something like

$(function() {
 $('a').attr('href', 'www.xyz.com/Index1/Index2/' + random_generator + '/Index4');
});

2 Catch the click event and redirect it with javascript, this would mean even if the user clicked the link multiple times without refreshing the page it would be random.

$(function() {
 $('a').on('click', function(e) {
   e.preventDefault();
   window.location = 'www.xyz.com/Index1/Index2/' + random_generator + '/Index4';
 });
});

If you don't wish you use jquery I'm sure there's plenty examples online to do this with plain javascript.

answered Oct 22, 2012 at 20:14

David Esteves

1,6042 gold badges15 silver badges22 bronze badges

1 Comment

Cafecorridor Over a year ago

Appreciate your response. Thank You.

Collectives™ on Stack Overflow

Using a Javascript variable in HTML <a> link

5 Answers 5

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related