How to Insert a JavaScript Variable Inside href Attribute?

By IncludeHelp Last updated : September 11, 2024

In HTML, the href is an attribute within anchor tag <a> that specifies the URL or path to the resource the link points to. The "href" stands for "hypertext reference".

In this article, we will learn how to insert the JavaScript variable inside the href attribute. We can use different ways to insert the JavaScript variable within the href attribute.

Following is the syntax of using "href" within the anchor tag:

<a href="URL or Path">Resource Name</a>

If someone clicks on the Resource Name, it will redirect to another page where the provided URL or path belongs.

Following is a list of various ways which we going to use in our JavaScript program to insert a JavaScript variable inside the href attribute:

Using onclick property
Using document.write

Insert JavaScript Variable Inside href Attribute Using onclick Property

In this approach, we will use the onclick property of the <a> anchor tag , whenever the link is clicked (anchor tag <a>), an onclick event is triggered. Here, we will use this onclick event to generate a new URL and redirect the user to that URL.

The newly generated URL will contain the Variable we want to use inside the href attribute.

Example

Following is the example of the above approach:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <p>Click on below link and see the URL:</p>
   <div>
       <a href="https://www.google.com/" onclick="location.href=this.href+'?xyz='+val;return false;">Click me!</a>
   </div>
   <script>
       let val = 200;
   </script>
</body>
</html>

Output

The above program produces the following output â€“

After clicking on the displayed link "Click me!":

Insert a JavaScript Variable Inside href Attribute (Output Screen 2)

You can recognize in the URL the JavaScript-provided value 200 is added at the end of the current URL.

Insert JavaScript Variable Inside href Attribute Using document.write

Once we execute the current JavaScript or HTML program, the HTML document is loaded into a web browser and it becomes a document object. This document has several built-in functions, one of the which is write() function. This function is used to write an HTML expression or JavaScript code to a document.

This function lets us insert the JavaScript variable inside an href attribute of an anchor tag as follows:

Example

Following is another example of another of the above problems to insert a JavaScript variable inside the "href" attribute of an anchor <a> tag â€“

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <p>Below is the new generated URL (Click to redirect): </p>
   <script>
       let val = 1234023;
       let URL = "https://www.google.com/abc?=" + val;
       //using document.write() function
       document.write('<a href = "' + URL + '">Hey! Click me</a>');
   </script>
</body>
</html>