CODEWITHSUNDEEP
javascripthref
Mike
Mike

Reputation: 93

html link, href assignment from a Javascript function

I have a simple Javascript function which builds a Url that I want to provide a link to.

However, I can't seem to get the anchor tag working with it. How do I assign the href of the anchor tag the results of the Javascript function?

Neither one of these work correctly:

<a href="getUrl();">Click here</a>
<a href="javascript:getUrl();">Click here</a>

This is what I want to accomplish.

Upvotes: 7

Views: 37749

Answers (6)

RBN
RBN

Reputation: 125

The following worked for me 

<script type="text/javascript">
   $(function() {
        document.getElementById("aTag").href = getUrl();
   });
</script>

<a id="aTag">Click Here</a>

Upvotes: 0

Shan Eapen Koshy
Shan Eapen Koshy

Reputation: 2995

None of the above solutions worked for me. A good way would be to create a new link in the function.

function fetchURL() {
  var title = "Download";
  var URL = title.link("https://www.google.com");
  document.getElementById("dynamicButton").innerHTML = URL;

}
<body onload="fetchURL()">
  <div id="dynamicButton">
    //empty
  </div>

Upvotes: 1

micha
micha

Reputation: 1085

<script type="text/javascript">
    function getUrl()
    {
        return "http://www.google.com";
    }
</script>
<a href="javascript:document.location.href=getUrl();">Click here</a>

-- update --

If I wanted to incorporate user278064s' comments, i would change the above into:

  <script type="text/javascript">
        function getUrl()
        {
            return "http://www.google.com";
        }
    </script>
    <a href="#" onClick="document.location.href=getUrl();">Click here</a>

Upvotes: 13

user278064
user278064

Reputation: 10170

function getUrl(that) {
   return "www.whateveryouwant.com";
}

// Point the a.href attribute at your url.
var a = document.getElementsByTagName('a')[0];
a.href = getUrl();

UPDATE

I assume that you want to use the getUrl() method to set the href attribute, because probably the pointed url is not static (so it could change at any moment e point to the getUrl() returned url.)

Anyway, you could assign the href attribute, when i.e. the user click on the link, in this way.

function changeHref(aElem) {
   aElem.href = getUrl();
}

Following the complete code:

<a href="#" onclick="changeHref(this);">click me!</a>

<script>
   function getUrl(that) {
      return "www.whateveryouwant.com";
   }

   function changeHref(aElem) {
      aElem.href = getUrl();
   }
</script>

One other thing. You should avoid the use of javascript: pseudo-protocol.

This fragment will explain you why:

A pseudo-protocol is a nonstandard take on this idea. The javascript: pseudo-protocol is supposed to be used to invoke JavaScript from within a link. Here’s how the javascript: pseudo-protocol would be used to call the popUp function:

<a href="javascript:popUp('http://www.example.com/');">Example</a>

This will work just fine in browsers that understand the javascript: pseudo-protocol. Older browsers, however, will attempt to follow the link and fail. Even in browsers that understand the pseudoprotocol, the link becomes useless if JavaScript has been disabled. In short, using the javascript: pseudo-protocol is usually a very bad way of referencing JavaScript from within your markup.

DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition

Upvotes: 0

s4y
s4y

Reputation: 51685

Give the link an id:

<a id="specialLink">Click Here</a>

Later on, set its href from JavaScript:

document.getElementById('specialLink').href = getUrl();

(You might want to include a placeholder href in the link which people with JavaScript disabled will see.)

Upvotes: 0

AlexC
AlexC

Reputation: 9661

<a onclick="getUrl();" href="#">Click here</a>

Click Here

Upvotes: 0

Related Questions