How to insert a JavaScript variable inside href attribute?

24 Jun, 2020
<a > ... </a> tags are used to create hyperlinks in HTML.One of the attributes of ‘a’ tag is ‘href’
href: Specifies the URL of the page the link goes to
Example:
<a href="https://www.geeksforgeeks.org/">
    GeeksforGeeks
</a>

Methods to use Variables inside this ‘href’ attribute:
Using onclick property:This method uses the ‘onclick’ property of ‘a’ tag,i.e, whenever the link (‘a’ tag) is clicked, an ‘onclick’ event is triggered.Here we will use this onclick event to generate a new URL and redirect the user to that URL.(NOTE: This URL will contain the Variable we want to use inside href attribute)Steps:First, we need to know the following terms,“location.href” -> It is the entire URL of the current page.“this” -> Refers to the ‘a’ tag that has been clicked.“this.href” -> fetches the href value from the ‘a’ tag.Once we have “this.href”, append the variable to it (Here we have used a variable named “XYZ”).Then we need to append the value to the URL.Now our URL is ready with the variable and its value appended to it.In the example below, we will append a variable named ‘XYZ’ and its value is 55.<!DOCTYPE html><html><head>    <title>GeeksforGeeks</title>    <script>        var val = 55;    </script></head>    <body>                                   Link to <a href="https://www.google.com/"onclick="location.href=this.href+'?xyz='+val;return false;">     Google</a>              </body></html>Resultant Url: https://www.google.com/?xyz=55
‘val’ is the javascript variable that stores the value that we want to pass into the URL.The URL has a variable named ‘XYZ’ that takes value = 55 from the javascript variable ‘val’.
Steps:First, we need to know the following terms,
“location.href” -> It is the entire URL of the current page.
“this” -> Refers to the ‘a’ tag that has been clicked.
“this.href” -> fetches the href value from the ‘a’ tag.
Once we have “this.href”, append the variable to it (Here we have used a variable named “XYZ”).Then we need to append the value to the URL.Now our URL is ready with the variable and its value appended to it.
In the example below, we will append a variable named ‘XYZ’ and its value is 55.
<!DOCTYPE html><html><head>    <title>GeeksforGeeks</title>    <script>        var val = 55;    </script></head>    <body>                                   Link to <a href="https://www.google.com/"onclick="location.href=this.href+'?xyz='+val;return false;">     Google</a>              </body></html>
Resultant Url: https://www.google.com/?xyz=55

‘val’ is the javascript variable that stores the value that we want to pass into the URL.The URL has a variable named ‘XYZ’ that takes value = 55 from the javascript variable ‘val’.
Using document.write:document: When an HTML document is loaded into a web browser, it becomes a document object.This document object has several functions, one of them is written ().write(): Writes HTML expressions or JavaScript code to a documentIn this method, we will use this write() function to create an “a tag”.<!DOCTYPE html><html><head>    <title>GeeksforGeeks</title>    <script>        var val = 55;    </script></head>    <body>                         Link to         <script>            var loc = "https://www.google.com/?xyz="+val;            document.write('<a href="' + loc + '">Google</a>');        </script>    </body></html>Resultant Url: https://www.google.com/?xyz=55
‘val’ is the javascript variable that stores the value that we want to pass into the URL.The URL has a variable named ‘XYZ’ that takes value = 55 from the javascript variable val.
<!DOCTYPE html><html><head>    <title>GeeksforGeeks</title>    <script>        var val = 55;    </script></head>    <body>                         Link to         <script>            var loc = "https://www.google.com/?xyz="+val;            document.write('<a href="' + loc + '">Google</a>');        </script>    </body></html>
Resultant Url: https://www.google.com/?xyz=55

‘val’ is the javascript variable that stores the value that we want to pass into the URL.The URL has a variable named ‘XYZ’ that takes value = 55 from the javascript variable val.
HTML-Attributes
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?