JavaScriptの式ではなく、値を保存してください

Question

まず、この質問をどのように行うのかについてはあまりよく分かりません。

var buttons = publishedWork.getElementsByTagName('button'); 

と私は各ボタンをクリックすることにより、◼およびその逆する▶から、その内容を変更することです：私は要素の配列を持っています。事は、私は、私がそれをするつもりどのように多くのボタンの合計になりますかわからないということであるために：

var currentButton; 
for (var i = buttons.length; i;) { 
    buttons[--i].onclick = function() { 
     if (currentButton === buttons[i]) { 
      currentButton.textContent = '▶'; 
      currentButton = null; 
     } else { 
      currentButton = buttons[i]; 
      currentButton.textContent = '◼'; 
     } 
    } 
} 

しかし、このコードがないことで、それに関係なく、私はいつも、それをクリックしてどのようなボタン最初のボタンの内容を変更します。これは、buttons[i]という式がcurrentButtonに格納されているものであり、ボタン自体への参照ではありません。

だから私の質問は次のとおりです。

が、これは、クロージャ（私は把握し始めているトピック）によって解決する場合であるか、別の解決策はありますか？

Answer 1

を処理するために、クリック内でthisまたはevent.currentTargetを使用するハンドラ

.... 
buttons[--i].onclick = function(event) { 


     // both `this` and `event.currentTarget` gives the clicked button here 


} 
.... 

var currentButton; 
for (var i = buttons.length; i;) { 
    buttons[--i].onclick = function() { 
     if (currentButton === this) { 
      ... 
      currentButton = null; 
     } else { 
      currentButton = this; 
      ... 
     } 
    } 
} 

あなたの現在のボタンを最初にリセットする必要があります。

var currentButton; 
for (var i = buttons.length; i;) { 
    buttons[--i].onclick = function(event) { 
     if (currentButton === this) { 
      currentButton.textContent = '▶'; 
      currentButton = null; 
     } else { 
      if(currentButton){ 
       currentButton.textContent = '▶'; 
      } 
      currentButton = this; 
      currentButton.textContent = '◼'; 
     } 
    } 
} 

Answer 2

私が間違っていない限り、一般的な「ループ内のインデックス依存関数を定義する」問題のように見えます。 onclick関数が呼び出されると、変数iにアクセスします。しかし、そのときには、iはループ全体を通して0になっています。だから、すべてのクリックハンドラーが見ていますi == 0

これを解決するには、ハンドラ：

var currentButton; 

function createClickHandler(index) { 
    var button = buttons[index]; 
    return function() { 
     if (currentButton === button) { 
      currentButton.textContent = '▶'; 
      currentButton = null; 
     } else { 
      currentButton = button; 
      currentButton.textContent = '◼'; 
     } 
    }; 
} 

for (var i = buttons.length; i;) { 
    buttons[--i].onclick = createClickHandler(i); 
} 

編集：やダイオードの提案を:)使用
私は「閉鎖のインデックス」の問題に焦点を当てたが、ダイオードの答えは非常にクリーンで、より良い方法はそれを