Last Updated : Jan 1, 2023
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.
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.
- <!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.
- The<html> tag is used to indicate the beginning of HTML document.
- 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.
- 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.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- 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.
- <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.
- Here when user clicks disable button onclick event will loads the disable() function.
- 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.
- 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’.
- 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.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.