7

Due to limitations, I have to set a URL string on every page header in my website as a JavaScript string variable like this var burl = "http://www.example.com";

Now, I have to pass this string burl inside an HTML href="" tag in the of my website. I also want to be able to add extra URL elements to the href link beside the burl.

Here's what the full code look like Javascript + HTML code;

<script>
var burl = "http://www.example.com";
</script>
<html>
<head>
</head>
<body>

<h1>JavaScript Variables</h1>

<p>the href below should link to http://www.example.com</p>

<a href="{burl-string-here}/blog/article/">Open Here</a>

</body>
</html>

Any help solving this simple issue will be appreciated.

Joseph Raphael
  • 338
  • 2
  • 3
  • 13

3 Answers3

10

You can do that in two ways:

  • document.write

  • Via the DOM

document.write:

In a script tag where you want the link:

document.write('<a href="' + burl + '">Open here</a>');

That's processed during the parsing of the page, and replaces the script link with the text you output.

Live example:

<script>
var burl = "http://www.example.com";
</script>
<h1>JavaScript Variables</h1>
<p>the href below should link to http://www.example.com</p>
<script>
document.write('<a href="' + burl + '">Open Here</a>');
</script>
<p>this is after the link</p>

Via the DOM

Put an id on the link:

<a href="" id="burl">Open here</a>

and then in a script tag after it

document.getElementById("burl").href = burl;

Live example:

<script>
var burl = "http://www.example.com";
</script>
<h1>JavaScript Variables</h1>
<p>the href below should link to http://www.example.com</p>
<a href="" id="burl">Open Here</a>
<p>this is after the link</p>
<script>
document.getElementById("burl").href = burl;
</script>

Re your comment:

what if...I want to manually add an extra element to each link <a href="burl-string-here/extra-link-element"

I'd use a data-* attribute (data-extra, whatever) on the links to say what the extra was. Then get the element into a variable, then:

link.href = burl + link.getAttribute("data-extra");`

I wouldn't put the extra in href because some browsers try to expand href even when you get it via getAttribute (though they shouldn't).

You've said "each link" which makes me think you have a bunch of them. If so, don't use an id, but a class instead:

<script>
var burl = "http://www.example.com";
</script>
<h1>JavaScript Variables</h1>
<p>the href below should link to http://www.example.com</p>
<p><a href="" class="burl" data-extra="/first">First link</a></p>
<p><a href="" class="burl" data-extra="/second">Second link</a></p>
<p><a href="" class="burl" data-extra="/third">Third link</a></p>
<p>this is after the link</p>
<script>
(function() {
  Array.prototype.forEach.call(document.querySelectorAll("a.burl"), function(link) {
    link.href = burl + link.getAttribute("data-extra");
  });
})();
</script>

That uses Array#forEach which is on all modern browsers, but not (say) IE8. It can be shimmed/polyfilled, though, or you can use a simple for loop. Options in this other answer (see "for array-like objects" as the list we get back from querySelectorAll is array-like).

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 2nd way "via DOM" is the only one I can use TJ but there is only one problem, it replaces the whole href tag... what if you I want to manually add an extra element to each link ` – Joseph Raphael Mar 20 '15 at 09:29
  • @JosephRaphael: I'd use a `data-*` attribute (`data-extra`, whatever) on the link to say what the extra was, get the element into a variable, then: `link.href = burl + link.getAttribute("data-extra");` I wouldn't put the extra in `href` because *some* browsers try to expand `href` even when you get it via `getAttribute` (though they shouldn't). – T.J. Crowder Mar 20 '15 at 09:44
  • can you please update the code snippet you posted with this, so everyone can benefit from it thank you. – Joseph Raphael Mar 20 '15 at 09:46
  • @JosephRaphael: Just did, in fact! :-) – T.J. Crowder Mar 20 '15 at 09:50
  • @t-j-crowder thank you, BTW, can I use id=burl" instead of class="burl" ? thank you – Joseph Raphael Mar 20 '15 at 09:57
  • @JosephRaphael: Not if there's more than one of them. `id` values must be unique on the page. – T.J. Crowder Mar 20 '15 at 10:09
1

is it, what u want?

$(document).ready(function(){
  var burl = "http://www.example.com";
  $('a').attr('href', burl); 
});

ps using jQuery.

Legendary
  • 2,243
  • 16
  • 26
0

if you are using jQuery.

 <script>
$(document).ready(function(){
  var burl = "http://www.example.com";
  $('a').attr('href',burl )
});
</script>
tech-gayan
  • 1,373
  • 1
  • 10
  • 25