Menu
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.
441
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>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).
157
is it, what u want?
$(document).ready(function(){
var burl = "http://www.example.com";
$('a').attr('href', burl);
});
ps using jQuery.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
