code-boxx/0-JS-ONE-CLICK.MD

## 0-JS-ONE-CLICK.MD

      
    Raw
  

              0-JS-ONE-CLICK.MD
            
          
    JAVASCRIPT ALLOW ONLY ONE CLICK

https://code-boxx.com/allow-one-click-javascript/
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-disable.html
<!DOCTYPE html>
<html>
  <head>
    <title>Disable Button</title>
    <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>
  </head>
  <body>
    <!-- (D) HTML BUTTON -->
    <input type="button" id="myButton" onclick="doSomething()"
           value="Click Here To Do Something">
  </body>
</html>

## 2-flag.html
<!DOCTYPE html>
<html>
  <head>
    <title>Protection Flag</title>
    <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>
  </head>
  <body>
    <!-- (C) HTML ELEMENT -->
    <div onclick="doSomething()">
      Click Here To Do Something
    </div>
  </body>
</html>

## 3-remove-onclick.html
<!DOCTYPE html>
<html>
  <head>
    <title>Remove On-click</title>
    <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>
  </head>
  <body>
    <!-- (D) HTML ELEMENT -->
    <div id="myDiv" onclick="doSomething()">
      Click Here To Do Something
    </div>
  </body>
</html>

## 4-event.html
<!DOCTYPE html>
<html>
  <head>
    <title>Attach Detach Click Listener</title>
    <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>
  </head>
  <body>
    <!-- (C) HTML ELEMENT -->
    <!-- NOTE : NO ONCLICK, ASSIGNED WITH JAVASCRIPT -->
    <div id="myDiv">
      Click Here To Do Something
    </div>
  </body>
</html>

## 5-switcher.html
<!DOCTYPE html>
<html>
  <head>
    <title>Funky Function Switcher</title>
    <script>
    // (A) ALREADY CLICKED
    function doClicked () {
      alert("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>
  </head>
  <body>
    <!-- (D) HTML BUTTON -->
    <input type="button" id="myButton" onclick="funky()"
           value="Click Here To Do Something">
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Disable Button</title>
	<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>
	</head>
	<body>
	<!-- (D) HTML BUTTON -->
	<input type="button" id="myButton" onclick="doSomething()"
	value="Click Here To Do Something">
	</body>
	</html>