ループ内の要素のセットに異なるイベントリスナーを追加する

Question

インターネットのこんにちは ボタンのセットがあります。ボタンをクリックすると、その内容はテキストフィールドのコンテンツに追加されます。

[first] [second] [third] addEventListener-implementationは、どのボタンを押しても、テキストフィールドの内容に "third"が追加されます。私はこれを解決するために熱い知らない。

私が欲しいもの

function setupListeners() { 
    var targetInputField = d.querySelector("#expression"); 
    var t = d.querySelectorAll(".expression-button").length; 
    for (var i = 1; i <= t; i++) { 
     var btnElem = d.querySelector("#expression-button-"+i); 
     btnElem.addEventListener('click', function() { 
      if (targetInputField.value == "") { 
       targetInputField.value = btnElemLocal.innerText; 
      } 
      else { 
       targetInputField.value += ";"+btnElemLocal.innerText; 
      } 
     }); 
    } 
} 

：

私は行の三つのボタンの全てをクリックすると、テキストフィールドの内容は次のようになります。

「第一、第二、第三」

そして：

「第三、第三、第三」

Answer 1

別の関数（私の例ではbtnClick）内のクリックイベントのコードを入れて、あなたがループ内.addEventListener()にイベントを添付するときだけ参照するためにthisを使用し、その後、それを呼び出します現在クリックされている要素：

function btnClick() { 
    var targetInputField = d.querySelector("#expression"); 

    if (targetInputField.value == "") { 
    targetInputField.value = this.innerText; 
    } 
    else { 
    targetInputField.value += ";"+this.innerText; 
    } 
} 

var d = document; 
 

 
function setupListeners() {  
 
    var t = d.querySelectorAll(".expression-button").length; 
 

 
    for (var i = 1; i <= t; i++) { 
 
    var btnElem = d.querySelector("#expression-button-"+i); 
 
    
 
    btnElem.addEventListener('click', btnClick); 
 
    } 
 
} 
 

 
function btnClick() { 
 
    var targetInputField = d.querySelector("#expression"); 
 
    
 
    if (targetInputField.value == "") { 
 
    targetInputField.value = this.innerText; 
 
    } 
 
    else { 
 
    targetInputField.value += ";"+this.innerText; 
 
    } 
 
} 
 

 
setupListeners();

<button class='expression-button' id='expression-button-1'>First</button> 
 
<button class='expression-button' id='expression-button-2'>Second</button> 
 
<button class='expression-button' id='expression-button-3'>Third</button> 
 

 
<input id='expression' />