✖

All TalkersCode Topics

Follow TalkersCode On Social Media

How To Disable Anchor Tag In HTML Using JavaScript

Last Updated : Jan 1, 2023

IN - HTML JavaScript

How To Disable Anchor Tag In HTML Using JavaScript

In this tutorial we will show you the solution of how to disable anchor tag in HTML using JavaScript, anchor tag used for creates a link in HTML document and link can be with text, image or icon anything between <a> and </a> tags.

Link by default its color blue, underlined and clickable, with the help we can move to another file it may be internal or external.

Link contain PATH information about another location. When disable a anchor tag it can’t move to another location and unclickable. Let us see below how to implement step by step guidance.

Step By Step Guide On How To Disable Anchor Tag In HTML Using JavaScript :-

Now we use javascript for disable <a> anchor tag with the help of button. For access <a> tag ID attribute declared with the help we are disabled the <a> tag.

Then we are setting <a> tag attribute pointer-events to none. If your beginner you need to know about events, it is a response for the user inputs.

When we giving pointer-events to none exact response will not occur.

So we can achieve our goal, one more attributes used for showing its inactive i.e default blue color when disable button clicks changed to black.

When using javascript, php or CSS like other languages we have to write within the <head> tag with respective beginning tags, here we used <script> tag for javascript.

<!DOCTYPE html>
<html>
<head>
<title>
Disable anchor tag using javascript
</title>
<script type="text/javascript">
function disable(){
    var a=document.getElementById("link");
    a.setAttribute("class","disabled");
    a.setAttribute("style","color:black;pointer-events:none;");
}
</script>
</head>
<body>
<a href="www.google.com" id="link">www.google.com</a>
<button onclick="disable()" >Disable</button>
</body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and some websites when need to use external files those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. In <a> tag href attribute used for collect the path of document and when we need to access particular elements in HTML we have to declare ID, CLASS or NAME attributes. Here we used ID attribute for access <a> tag.
  7. <button> tag used for creates button on website. Usually button have more number of events we used onclick event, when user clicks a button some function will load.
  8. Here when user clicks disable button onclick event will loads the disable() function.
  9. Var used to declare an variable in javascript, ‘a’ is variable name. In document.getElementById() document is document object used for access any HTML element in webpage and getElementById() is a method return the value of elements ID attribute.
  10. So we used document.getElementById(‘link’) to get the value of <a> tag. setAttribute() is method for sets the value of an attribute on specified element.
  11. a.setAttribute("class","disabled") line sets value of ‘disabled’ to class attribute on element ‘a’and a.setAttribute("style","color:black;pointer-events:none;") line sets value color to black, pointer-events to none on the element ‘a’.
  12. So we achieve the result, when click disable button disable() function will load then <a> tag disabled, color changed to black & pointer-events response also stopped.
  13. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

I hope this tutorial on how to disable anchor tag in HTML using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

In conclusion now we are able to disable anchor tag using javascript in html and also we learn new methods, events, functions.

Javascript is popular used as a client side programming language if your beginner its really useful in future because here we learned basics of javascript.

Latest Tutorials