5 Ways to Allow Only One Click in Javascript (Simple Examples)

Welcome to a beginner’s tutorial on how to allow only one click in Javascript. So you have a button or element that says “click here to do something”, but want to prevent the user from clicking it multiple times.

So just how do we do all of these? Let us walk through some actual examples – Read on to find out!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/allow-only-one-click-in-javascript/” title=”How To Allow Only One Click In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) DISABLING THE BUTTON

<script>
function doSomething () {
  // (A) DISABLE THE BUTTON
  document.getElementById("myButton").disabled = true;

  // (B) DO YOUR PROCESSING HERE
  alert("Something is done!");

  // (C) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // document.getElementById("myButton").disabled = false;
}
</script>
 
<!-- (D) HTML BUTTON -->
<input type="button" id="myButton" onclick="doSomething()"
       value="Click Here To Do Something">

It’s as simple as that, we manually disable the button with document.getElementById("myButton").disabled = true when it is clicked. But yep, take note this will only work on buttons:

• <input type="button">
• <input type="submit">
• <button>

 

 

2) PROTECTION FLAG

<script>
// (A) FLAG FOR "ALREADY CLICKED".
var clicked = false;
 
// (B) FUNCTION - WILL ONLY RUN IF NOT CLICKED
function doSomething () { if (!clicked) {
  // (B1) SET CLICKED TO TRUE
  clicked = true;
 
  // (B2) DO YOUR PROCESSING HERE
  alert("Something is done!");
 
  // (B3) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // clicked = false;
}}
</script>
 
<!-- (C) HTML ELEMENT -->
<div onclick="doSomething()">
  Click Here To Do Something
</div>

So what if we are not working with buttons? This is one of the possible mechanisms:

• First, we create a “protection” flag var clicked = false.
• Then in our onclick handling function, we will only proceed if (!clicked).
• Should be Captain Obvious by now – We will set clicked = true to prevent further clicks from processing.

 

3) REMOVE ON-CLICK ATTRIBUTE

<script>
function doSomething () {
  // (A) REMOVE ONCLICK
  var element = document.getElementById("myDiv");
  element.onclick = "";

  // (B) DO YOUR PROCESSING HERE
  alert("Something is done!");

  // (C) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // element.onclick = doSomething;
}
</script>
 
<!-- (D) HTML ELEMENT -->
<div id="myDiv" onclick="doSomething()">
  Click Here To Do Something
</div>

The above is actually not the preferred “orthodox” method, this one is. We simply remove the onclick from the element with a one-liner document.getElementById("myDiv").onclick = "".

 

 

4) ATTACH & DETACH EVENT LISTENER

<script>
// (A) ATTACH CLICK LISTENER ON PAGE LOAD
window.addEventListener("load", () => {
  document.getElementById("myDiv").addEventListener("click", doSomething);
});
 
// (B) THE USUAL FUNCTION
function doSomething () {
  // (B1) DETACH CLICK LISTENER
  var div = document.getElementById("myDiv");
  div.removeEventListener("click", doSomething);
 
  // (B2) EXTRA - CHANGE THE TEXT IF YOU WANT
  div.innerHTML = "You clicked";
 
  // (B3) DO YOUR PROCESSING HERE
  alert("Something is done!");
 
  // (B4) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // div.addEventListener("click", doSomething);
}
</script>
 
<!-- (C) HTML ELEMENT -->
<!-- NOTE : NO ONCLICK, ASSIGNED WITH JAVASCRIPT -->
<div id="myDiv">
  Click Here To Do Something
</div>

Now, this one may seem to be a little more long-winded, but it will make sense in the long run as you learn more about the difference between addEventListener and onclick. That is out of point for this tutorial, so just know that there is something called addEventListener() and removeEventListener().

 

5) UNORTHODOX FUNCTION SWITCHER

<script>
// (A) ALREADY CLICKED
function doClicked () {
  alert("You have already clicked!");
}
 
// (B) NORMAL FUNCTION
function doSomething () {
  // (B1) SWITCH FUNKY TO DO THE IDLE FUNCTION
  funky = doClicked;
 
  // (B2) DO YOUR PROCESSING HERE
  alert("Something is done!");
}

// (C) FUNKY SWITCHING FUNCTION
var funky = doSomething;
</script>
 
<!-- (D) HTML BUTTON -->
<input type="button" id="myButton" onclick="funky()"
       value="Click Here To Do Something">

This last method is not actually “single click protection”, but switching to do something else completely after the first click.

• Create your first function function doSomething() – This one will do your “main intended processing”.
• Create your second function function doClicked() – This one can be a simple “please wait, now processing” message, or an Easter egg to scare the user.
• Then create a variable, point it to the first function var funky = doSomething.
• In the first line of function doSomething(), switch funky = doClicked.
• That’s about it. Finally,  just point the onclick of the button to funky.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

WHICH IS THE BEST?

All of the above methods work just fine, so whichever suits your needs. But if you are doing this “one-click protection” to prevent things like multiple registrations. Please remember to do your checks on the server side as well, check if the given user name or email is already registered.

Also, if you are thinking to stop spam with this, please don’t… Implement a CAPTCHA instead. Google offers it as a free service, and I will put a link below.

 

LINKS & REFERENCES

• Get Element By ID – MDN
• Event Listener – MDN
• PHP Contact Form with Google Recaptcha – Code Boxx

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET