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

27 Apr, 2020
JavaScript is a high-level, interpreted, dynamically-typed and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML documents. DOM acts as an interface between JavaScript and HTML combined with CSS. The DOM represents the document as nodes and objects i.e. the browser turns every HTML tag into a JavaScript object that we can manipulate. DOM is an object-oriented representation of the web page, that can be modified with a scripting language such as JavaScript. To manipulate objects inside the document we need to select it and then manipulate.
Selecting an element can be done in five ways:
document.querySelector() Method: It returns the first element that matches the query.
document.querySelectorAll() Method: It returns all the elements that matches the query.
document.getElementById() Method: It returns the one element that matches the id.
document.getElementsByClassName() Method: It returns all the elements that matches the class.
document.getElementsByTagName() Method: It returns a list of the elements that matches the tag name.
DOM allows attribute manipulation. Attributes control the HTML tag’s behavior or provide additional information about the tag. JavaScript provides several methods for manipulating an HTML element attribute.
The following methods are used to manipulate the attributes:
getAttribute() method: It returns the current value of an attribute on the element and returns null if the specified attribute does not exist on the element.
setAttribute() method: It updates the value of an already existing attribute on the specified element else a new attribute is added with the specified name and value.
removeAttribute() method: It is used to remove an attribute of the specified element.
The below code demonstrates the attribute manipulation where the href attribute of <a> tag changes on button click. A function is called on button click which updates the attribute value. The function myFunction() is a JavaScript function and it makes the HTML code more interactive by making runtime modifications.
Example 1:
<!DOCTYPE html><html>  <head>    <title>        How to change the href attribute        dynamically using JavaScript?    </title></head>  <body style="text-align:center;">          <h1 style="color:green">        GeeksforGeeks    </h1>          <h3>        Change the href attribute value<br>        dynamically using JavaScript    </h3>          <a href="https://www.google.com">        Go to Google    </a>          <br><br>          <button onclick="myFunction()">        Click Here!    </button>          <script type="text/javascript">        function myFunction() {             var link = document.querySelector("a");            link.getAttribute("href");            link.setAttribute("href",                "https://www.geeksforgeeks.org");            link.textContent = "Go to GeeksforGeeks";        }    </script></body>  </html>
Output:
Explanation: The link opens https://www.google.com before the button is clicked. when the button is clicked then the function myFunction() is called which selects the href attribute of <a> tag and updates its value to https://www.geeksforgeeks.org, Since there is only one <a> tag in the HTML document and we aim to change its attribute value, we use querySelector() and the attribute is updated using setAttribute() method.
Example 2:
<!DOCTYPE html><html>  <head>    <title>        How to change the href attribute        dynamically using JavaScript?    </title></head>  <body style="text-align:center;">          <h1 style="color:green">        GeeksforGeeks    </h1>          <h3>        Change the href attribute value<br>        dynamically using JavaScript    </h3>          <a href="https://www.google.com" id="myLink">        Go to Google    </a>          <br><br>          <button onclick="myFunction()">        Click Here!    </button>          <script type="text/javascript">        function myFunction() {             document.getElementById('myLink').href                ="https://www.geeksforgeeks.org";                              document.getElementById("myLink")                .textContent = "Go to GeeksforGeeks";        }    </script></body>  </html>
Output:
Explanation: The link opens https://www.google.com before the button is clicked. When the button is clicked the function myFunction() is called which selects the href attribute of <a> tag and updates its value to https://www.geeksforgeeks.org. In this approach, the getElementById() method is used to select the element whose destination URL is to be changed.
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
Set the value of an input field in JavaScript
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?