Sometimes, we want to change href of an a tag on button click with JavaScript

In this article, we’ll look at how to change href of an a tag on button click with JavaScript.

How to change href of an a tag on button click with JavaScript?

To change href of an a tag on button click with JavaScript, we can set the href property of the anchor element.

For instance, we write

<a href="#" id="abc">foo</a> <a href="#" id="myLink">bar</a>

to add 2 anchor elements.

Then we write

document.getElementById("myLink").onclick = (e) => {
  e.preventDefault();
  document.getElementById("abc").href = "example.com";
};

to get the anchor element with ID myLink with

document.getElementById("myLink")

Then we set its onclick property to a function that changes the href attribute of the anchor element with ID abc on click with

document.getElementById("abc").href = "example.com";

We call preventDefault to stop the default behavior of the link, which is to navigate to the URL set as the value of the href attribute.

Then we can run the rest of the code in the function.

Conclusion

To change href of an a tag on button click with JavaScript, we can set the href property of the anchor element.