Count Click Only Once

csscoder :

Here is my code:

<html>
  <body>
    <script>
      var clicks = 0;
      function clickME() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
      }    
    </script>

    <p>Clicks: <a id="clicks">0</a></p>
    <button type="button" onClick="clickME()">Click me</button>
    <button type="button" onClick="clickME()">Click me</button>
    <button type="button" onClick="clickME()">Click me</button>
    <button type="button" onClick="clickME()">Click me</button>
  </body>
</html>

I'm trying to use this example I found:

<body>
  <h1>Single click JS Button</h1>
  <button type="submit" onClick="this.disabled = true; return true;">Submit</button>
</body>

I'm confused on how to use the onClick="this.disabled = true; part because for my code I already have the function called when I wrote onClick. I used onClick="clickMe().

Are you allowed to have onClick twice? I want to use the onClick="this.disabled = true; because I don't want to keep increasing the amount of clicks if the user clicks the button again. If they click it once I only want to increment once and then disable the button or just not increase the count after.

Note on possible duplicate

I do not think this is a duplicate of the other question, as that is jQuery click() only once, but I'm using JavaScript. I have not learned jQuery (jQuery click() only once)*

Yosef Tukachinsky :

Please take a look here:

var clicks = 0;
function clickME(el) {
   el.disabled = true;
   clicks += 1;
   document.getElementById("clicks").innerHTML = clicks;
}

<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>

Count Click Only Once

Note on possible duplicate

Guess you like