How to disable a button after X clicks?

Question

I'd like my code to show me the content of an array when I click on a button.

One click for array[0], second for array[1] etc. I got it, but I don't know how to disable the button (or just stop the function) when my array has run out of content. I tried some simple for loop, but it didn't work.

var writing = (function() {
  var myArray = ["one ", "two ", "three!"];
  var counter = -1;
  return function() {
    return myArray[counter += 1];
  }
})();

function buttonFunction() {
  document.getElementById('parag').innerHTML += writing();
}

<button onclick='buttonFunction()'>Click</button>
<p id="parag">...</p>

score 2 · Accepted Answer · answered Dec 29 '16 at 17:33

2

Try this

var counter = -1;

var writing = (function () {
      var myArray = ["one ","two ","three!"];
      return function(){return myArray[counter+=1];}
    })();

    function buttonFunction(self) {
    document.getElementById('parag').innerHTML += writing();
      if(counter == 2)
       self.disabled = true;
      }

<button onclick='buttonFunction(this)'>Click</button>
    <p id="parag">...</p>

Variable counter must be global to know the current count of clicks.

answered Dec 29 '16 at 17:33

Jyothi Babu Araja

10,076
3
31
38

Why not `this`? Just curious. – Praveen Kumar Purushothaman Dec 29 '16 at 19:53
@PraveenKumar Not sure. If any kindly let me know. Very helpful for me and OP too. – Jyothi Babu Araja Dec 30 '16 at 05:25
I don't know, that's why I asked you... I asked why you have used `self` instead of `this`... – Praveen Kumar Purushothaman Dec 30 '16 at 05:35
How can we use `this` without the context of `button`. So i passed the context of button `(this)` in function call itself and accessed it as `self`, just a variable name. – Jyothi Babu Araja Dec 30 '16 at 05:38
Ah!!! I didn't notice that and I thought `self` was a keyword. LoL. Thanks. – Praveen Kumar Purushothaman Dec 30 '16 at 05:50

Syntac · Answer 2 · 2016-12-29T17:48:18.757

Sorry for my initial mistake. Just check in your anonymous function returned by writing() method for counter reaching myArray.length. In that case, disable the button like this:

return function(){
  if(++counter < myArray.length)
    return myArray[counter];
  else
    return "";
}

or

return function(){
  if(++counter < myArray.length)
    return myArray[counter];
  self.disabled=true;
  return "";
}

score 0 · Answer 3 · edited May 23 '17 at 12:33

Another approach which doesn't require keeping track of the index:

<button id="btn">Click</button>
<p id="parag">...</p>

<script>
    var myArray = ["one", "two", "three!"];

    var button = document.getElementById('btn');

    // If array is empty at the beginning, disable the button immediately
    if(myArray.length === 0) button.disabled = true;

    button.addEventListener('click', function(event) {

      document.getElementById('parag').innerText += myArray.shift();
      if(myArray.length === 0) this.disabled = true;

    });

</script>

myArray.shift() removes the first element from the array (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) and then you check if the Array is empty and if so, you disable the button.

Btw. Don't use onClick directly on elements (Why is using onClick() in HTML a bad practice?)

How to disable a button after X clicks?

3 Answers3