Inline Javascript:
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});
https://code-boxx.com/allow-one-click-javascript/
5 Ways to Allow Only One Click in Javascript (Simple Examples)
By W.S. Toh / Tips & Tutorials – Javascript / January 4, 2022
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:
- Disable the button after clicking on it.
- Use a boolean flag to indicate “clicked”, don’t process again if this flag is true.
- Remove the on-click attribute from the button after clicking once.
- Attach an on-click event listener, and detach it after clicking once.
- 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
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
onclickhandling function, we will only proceedif (!clicked). - Should be Captain Obvious by now – We will set
clicked = trueto 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(), switchfunky = doClicked. - That’s about it. Finally, just point the
onclickof the button tofunky.
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
- Get Element By ID – MDN
- Event Listener – MDN
- PHP Contact Form with Google Recaptcha – Code Boxx
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!