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.
<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>
onMouseOver/onMouseOut code which rewrites the status bar. But who uses the status bar anyway these days? ;)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>
<a onclick="getUrl();" href="#">Click here</a>
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.)
<script> block that you put just below the link.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
The following worked for me
<script type="text/javascript">
$(function() {
document.getElementById("aTag").href = getUrl();
});
</script>
<a id="aTag">Click Here</a>
