Question

当我点击按钮时，我希望我的代码向我展示数组的内容。

单击array[0]，第二次单击array[1]等等。我得到了它，但是当我的阵列用完时我不知道如何禁用按钮（或者只是停止功能）内容。我尝试了一些简单的for循环，但它没有用。

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>

Answer 1

试试这个

res

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>必须是全局的才能知道点击的当前counter。

Answer 2

抱歉我最初的错误。只需检查$nameobject."First_Name".length方法返回的writing()到达counter的匿名函数。在这种情况下，请禁用如下按钮：

myArray.length

或

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

Answer 3

另一种不需要跟踪索引的方法：

<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()从数组中删除第一个元素（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/shift），然后检查数组是否为空，如果是，则禁用该按钮。

顺便说一下。不要直接在元素上使用onClick（Why is using onClick() in HTML a bad practice?）

X点击后如何停用按钮？

3 个答案: