Is there a way to deactivate a clickable div immediately after it has been clicked on?

Question

Is there a way to deactivate a clickable div immediately after it has been clicked on?

I have been searching for a solution to this particular question on different platforms, including Stack Overflow. However, I am looking for an answer using pure JavaScript only, so please avoid jQuery solutions.

In order to provide context, I have included all of my code below. The issue seems to be related to the JavaScript section. My specific question is: How can I disable the "signup" div after it has been clicked once?

I have attempted to use a disable statement before calling the frame and fadeOut functions inside the HideLogin() function. I also experimented with CSS pointer-events, but nothing has worked so far. Each time I click SignUp, the animations repeat. Any assistance in solving this would be greatly appreciated.

JavaScript code here...

CSS code here...

HTML head content... HTML body elements...

javascript html css

Answer 1

Answer №1

If you don't have a specific reason to utilize <div> tags for your buttons, consider switching the HTML over to using <button> elements instead. By doing this, you'll be able to deactivate it with the disabled attribute and it will block any additional clicks without requiring you to keep track of extra JavaScript variables.

<button id="signup" onclick="HideLogin()">Sign Up</button>

function HideLogin() {
    document.getElementById("signup").disabled = true;
    ...
}

Answer 2

If you don't have a specific reason to utilize <div> tags for your buttons, consider switching the HTML over to using <button> elements instead. By doing this, you'll be able to deactivate it with the disabled attribute and it will block any additional clicks without requiring you to keep track of extra JavaScript variables.

<button id="signup" onclick="HideLogin()">Sign Up</button>

function HideLogin() {
    document.getElementById("signup").disabled = true;
    ...
}

Answer 3

Answer №2

My recommendation would be as follows:

begin by defining a global variable clickStatus=false

next, within your HideLogin function:

HideLogin = function(){
    if(!clickStatus){
        clickStatus=true;
        // Proceed with other actions
    }
}

This way, on the initial click, clickStatus will be set to true. Any subsequent clicks on the button will have no effect.

Answer 4

My recommendation would be as follows:

begin by defining a global variable clickStatus=false

next, within your HideLogin function:

HideLogin = function(){
    if(!clickStatus){
        clickStatus=true;
        // Proceed with other actions
    }
}

This way, on the initial click, clickStatus will be set to true. Any subsequent clicks on the button will have no effect.

Is there a way to deactivate a clickable div immediately after it has been clicked on?

Answer №1

Answer №2

Similar questions

Is there a way to prevent a link from activating when I click on one of its internal elements?

"CodeSandbox encountered an issue where PostCSS received an undefined value instead of the expected CSS

Implementation of internationalization into a JSON-formatted data file

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

Is there a way to automatically initiate the download of a file (such as a PDF) when a webpage loads?

Looking for advice on using media queries to resize my background image - any tips?

jQuery Accordian malfunctioning for all elements except the first one in the list

Is there a way to tally the frequency of a specific property appearing in one array within another, and then transfer those matches into a separate array?

The call function in Tween.js fails to execute after adding an EventListener

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

Calculating the factorial of a number using the reduce function

Guide on uploading a file to Pinata directly from a React application

Altering the appearance of a component that is currently selected and in use

a table in HTML with cells positioned in the center

Is there a feature similar to Nuxt.js' auto-register in Next.js?

Saving JSON format in VueX State Management

Mobile-style menu with full desktop height

The wait function does not pause execution until the element is found within the DOM

Images fail to display on iOS devices using the Ionic Framework