CODEWITHSUNDEEP
javascripthtml
TKPhillyBurb
TKPhillyBurb

Reputation: 171

Using a variable as the href

I want to have the href consist of a variable set in javascript, I also need the text that is displayed on the page to be a variable. In the example below I would like to have the string "http://google.com" be assigned to a variable, I also need to have "My Link Name" as a variable. I have looked at similar questions here but I don't see what addresses this particular situation. 

  <a href="http://google.com">Go Here Now</a><br>

In the example below I can create a variable called myLinkName and set it to the string "Go here now" however I don't know how to create a variable and set it to the value of the href e.g. "http://google.com"

<script type="text/javascript">
   var myLinkName = "Go Here Now";
</script>

<a href="http://google.com">
  <script type="text/javascript">
    document.write(myLinkName)
  </script></a>

Upvotes: 0

Views: 5041

Answers (6)

Adam A.
Adam A.

Reputation: 19

I would create an object that contains your link name and href and on page load, assign accordingly. Something like: 


window.addEventListener('load', function(){

    var link = {
        name : 'My Link Name',
        href : 'http://google.com' //should use : instead of =
    };

    var myLink = document.getElementByTagName('a')[0]; //You would change this to whatever selector you want.
    myLink.innerText(link.name);
    myLink.setAttribute('href', link.href);

}, true);

Syntax may not be perfect. And, depending on your situation, it may be better to accomplish this with your server side code. Hope this helps!

Upvotes: 1

htho
htho

Reputation: 1799

I fear you are using some very old JavaScript material.

The usage of document.write() is depricated. The approach you are following is antiqated. Today JS is not evaluated and just written to the document. Instead the document is explicitly manipulated.

First of all: <script> is sufficient to declare some JavaScript. The type attribute is not needed anymore.

<a id=myLink></a>
<script>
//get a reference to the a element
const myLink = document.getElementById("myLink");

//set the text
myLink.innerText = "Click me!";

//set href
myLink.href = "http://google.com";
</script>

Upvotes: 1

objectif
objectif

Reputation: 72

By using JQuery we can update/add href to the element like below.

HTML code:

<a href="http://www.live.com/" id="linkId">Click Here</a>

JQuery code:

$("#linkId").attr("href", "http://www.google.com/'");

Upvotes: -1

gokublack
gokublack

Reputation: 1460

You have to use the DOM API

HTML

<a id="aLink"></a>

Javascript

let link = document.getElementById('aLink');
link.href = "https://google.com";
link.innerText = 'This is my Link'

The complete code:

<html>
  <body>
    <a id="aLink"></a>

    <script>
      let link = document.getElementById('aLink');
      link.href = "https://google.com";
      link.innerText = 'This is Link';
    </script>

  </body>
</html>

Upvotes: 5

Jakob
Jakob

Reputation: 1895

You can change the href attribute by doing this:

<a href="http://google.com" id="link">
  <script type="text/javascript">
    var yourtext = 'Go Here Now';
    var href = 'http://google.com';
    document.getElementById('link').href = myLinkName;
    document.getElementById('link').innerText = yourtext;
</script></a>

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can set href attribute like this

 var text = 'Go Here Now';
    var href = 'http://google.com'
    var atag = document.getElementsByTagName('a')[0];
    atag.innerText = text;
    atag.href = href;


var text = 'Go Here Now';
var href = 'http://google.com'
var atag = document.getElementsByTagName('a')[0];
atag.innerText = text;
atag.href = href;
<a href=""></a><br>

Upvotes: 0

Related Questions