Xをクリックした後にボタンを無効にする方法はありますか？

Question

ボタンをクリックすると配列の内容を表示するようにコードを設定したいと思います。

array[0]の場合は1回、array[1]の場合は2回目です。私はそれを取得しましたが、私のアレイにコンテンツがなくなったときにボタンを無効にする（または単に機能を停止する）方法はわかりません。私はいくつかの単純なループを試しましたが、うまくいきませんでした。

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

変数counterはクリックの現在のcountを知ってグローバルでなければならない。この

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>

を試してみてください。

Answer 2

私の初期の間違いは申し訳ありません。 のwriting()メソッドから返された匿名関数をチェックして、myArray.lengthに達するだけです。

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

又は

return function(){ 
    if(++counter < myArray.length) 
    return myArray[counter]; 
    self.disabled=true; 
    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）から配列が空であるかどうかを確認し、そうであればボタンを無効にします。

Btw。要素上でonClickを直接使用しないでください（Why is using onClick() in HTML a bad practice?）