How to change the href value of <a> tag after clicking on button using JavaScript?

Javascript Web Development Front End Technology

The href attribute specifies the link’s destination, which can be a URL or an anchor point within the same document. Changing the attribute value of href which allows us to dynamically update the destination of the link, which can be useful in a variety of situations.

Generally, the <a> tag is used to create a hyperlink in HTML. <a> stands for anchor tag, and it is used to link the other web pages or to specify the exact locations within the same page. On the other side, the href attribute is used to specify the link’s destination, which can be a URL or an anchor point within the same document. By using JavaScript with HTML elements, we can build interactive applications.

In this article, we are going to see how we can change the href value of anchor tag after clicking on button using the JavaScript.

Several ways are used to change the href value of an anchor tag using Javascript. Let us discuss the three below approaches −

Using the href property
Using the setAttribute() method

Let’s discuss in detail of the three approaches −

Approach 1: Using the href Property

It is one of the way to change the href value of an anchor tag. This property is a read-write property which allows you to get or set the value of the href attribute. It belongs to the Anchor href property family.

The following is the syntax for the href property:

Here URL specifies the URL of the link.

Example

In the example below, we use assign new value to href property to change its value after clicking the button.

<html>
<body>
   <h3 id="center">Example for changing href attribute value after clicking the button</h3>
   <div id="myDiv">
      <a href="https://www.tutorix.com">Welcome to Tutorix Site</a>
      <br><br>
      <button onclick="sampleFunction()">
         click here
      </button>
   </div>
   <script>
      function sampleFunction() {
         var url = document.querySelector("a");
         url.href = 'https://www.tutorialspoint.com';
         url.textContent = "Hello, Welcome to Tutorialspoint";
      }
   </script>
</body>
</html>

Approach 2: Using the setAttribute() Method

We can change the href value of an anchor tag by using the setAttribute() method. It allows us to set the value of a specified attribute for an element.

Syntax

The following is the syntax for the setAttribute method −

element.setAttribute(name, value)

Parameters

name − It represents the attribute name
value − It represents the new attribute value

Example

In these example, we are going to change the href attribute of anchor tag after clicking the button using the JavaScript −

<html>
<head>
<body>
   <h3 id="center">Example for changing href attribute value after clicking the button</h3>
   <div id="myDiv">
      <a href="https://www.tutorix.com">Welcome to Tutorix Site</a>
      <br><br>
      <button onclick="sampleFunction()">
         click here
      </button>
   </div>
   <script>
      function sampleFunction() {
         var url = document.querySelector("a");
         url.getAttribute("href");
         url.setAttribute("href","https://www.tutorialspoint.com");
         url.textContent = "Hello, Welcome to Tutorialspoint";
      }
   </script>
</body>
</html>

Here we used the onclick event which occurs only when the user clicks on an Html Element and it is a purely JavaScript attribute. Whenever you click on the OnClick event it does some actions like displaying a message or redirecting the user another page. OnClick event must be used very less in the website, because it may create the confuse to the users. So, use these event very wisely.

Here we used the two methods, one is setAttribute and the another one is getAttribute method. setAttribute sets the value of a specified attribute for an element. getAttribute is used to return the current value of an attribute, and if the requested property does not exist then it returns the null. These two attributes are help to change the attribute value of href for the anchor tag.

Before we click the button the anchor tag shows the value as “Welcome to Tutorix Site”, once we click the button its changes the attribute value as “Hello, Welcome to Tutorialspoint”.

In this article, we have demonstrated how we can change the href attribute value of an <a> tag along with the examples. We have seen the two different examples here, in the first example, we used the setAttribute method, getAttribute method, and onClick event for changing the href attribute value of an anchor tag after clicking the button. In the second example, we used the innerHTML property, textContent property, and onClick event to change the href attribute value of an anchor tag after clicking the button.