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

Implementing an inline cache for <script> tags that load AJAX content

How to extract a subset of data from an existing object and create a new object in Vue JS

What are the reasons for the success function not being called and what steps can be taken to correct it

Adding and deleting MPEG-DASH segments from a media source buffer in a dynamic manner

What is the best way to fill HTML tables using an ajax response?

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Retrieve distinct keys from a JSON file in Node.js

building responsive servers within Gulp using connect

Transform the numerical character into a checkbox within a table using AngularJS

Dealing with pesky table cell padding issues in Chrome

Exploring Material UI: Understanding the contrast in functionalities between incorporating the Icon component and the Material Icons node

Find the sum of every combination of numbers in the array

What steps do I need to take to create npm packages specifically for react-native development?

Is there a way to conceal the contents of a page until all the images have finished loading?

Is there a way to implement the adjacent selector in combination with the :before selector?

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whoops! The input buffer seems to be containing an image format that is not supported while attempting to utilize Next JS next-opt

The embedded component is throwing an error stating that the EventEmitter is not defined in

Managing time-intensive web service operations using JavaScript callbacks

JavaScript text converter using split() method