How to insert a JavaScript variable inside href attribute?

Last Updated : 06 Aug, 2024

To insert a JavaScript variable inside the href attribute of an HTML element, <a > … </a> tags are used. One of the attributes of ‘a’ tag is ‘href’.

href: Specifies the URL of the page the link goes to.

Below are the Methods to use Variables inside this ‘href’ attribute:

Table of Content

Example:

<a href="https://www.geeksforgeeks.org/">
    GeeksforGeeks
// Using href attribute for url.
</a>

Using onclick property

This method uses the ‘onclick‘ property of the ‘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 the href attribute)
Now we will set the URL.
“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.

Example: In the example below, we will append a variable named ‘XYZ’ and its value is 55.

HTML

<!DOCTYPE html> <html>  <head>     <title>GeeksforGeeks</title>     <script>         let 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>

Output: This result will be shown in the searchbar.

Resultant Url: https://www.google.com/?xyz=55

When an HTML document is loaded into a web browser, it becomes a document object. This document object has several functions, one of which is written (). write(): Writes HTML expressions or JavaScript code to a document

Example: In this method, we will use this write() function to create an “a tag”.

html

<!DOCTYPE html> <html>  <head>     <title>GeeksforGeeks</title>     <script>         let val = 55;     </script> </head>  <body>     Link to     <script>         let loc = "https://www.google.com/?xyz=" + val;         document.write('<a href="' + loc + '">Google</a>');     </script> </body>  </html>

Output: This result will be shown in the searchbar.

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 Template Literals

Template literals are string literals allowing embedded expressions. We can use template literals to dynamically construct the href attribute by directly embedding the JavaScript variable within the URL string.

Example:

JavaScript

<!DOCTYPE html> <html>  <head>     <title>Dynamic Href</title> </head>  <body>     <!-- Using standard HTML for the href initially -->     Link to <a id="dynamicLink" href="#">Google</a>      <script>         // Define the variable         let val = 55;          // Function to update the href         function updateHref() {             const link = document.getElementById("dynamicLink");             link.href = `https://www.google.com/?xyz=${val}`;         }          // Update the href when the document is loaded         document.addEventListener("DOMContentLoaded", updateHref);     </script> </body>  </html>

Output:

Resultant Url: https://www.google.com/?xyz=55

In this approach, we directly embed the JavaScript variable val within the URL string using template literals, making the code cleaner and easier to read.

Cypress - Get Attribute value and store in Variable

7maestro

Improve

Article Tags :

How to insert a JavaScript variable inside href attribute?

Using onclick property

Using document.write

Using Template Literals

Similar Reads