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.

There are a number of ways to allow only one-click in Javascript:

  1. Disable the button after clicking on it.
  2. Use a boolean flag to indicate “clicked”, don’t process again if this flag is true.
  3. Remove the on-click attribute from the button after clicking once.
  4. Attach an on-click event listener, and detach it after clicking once.
  5. Unorthodox method – Change the on-click function after clicking once.

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

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes One-Click Protection Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

ONE-CLICK PROTECTION

With that, let us now move into the mechanisms we can put in place for “one-click protection”.

 

1) DISABLING THE BUTTON

1-disable.html
<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

2-flag.html
<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

3-remove-onclick.html
<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

4-event.html
<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

5-switcher.html
<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.

 

 

USEFUL BITS & LINKS

That’s all for this short tutorial, and here is a small section on some extras and links that may be useful to you.

 

WHICH IS THE BEST?

All of the above methods work just fine, so whichever that 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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Allow Only One Click In Javascript (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “5 Ways to Allow Only One Click in Javascript (Simple Examples)”

Leave a Comment

Your email address will not be published.