Javascript：クリック時にテーブル内の文字列を変更する

Question

私はJavascriptクラス（まだかなり新しい言語です）にあり、この問題を回避しようとしています。基本的には、クリックしたときに、<td>行の文字列を何かに変更するイベントリスナーを追加する必要があります。

私は下に書かれたものがうまくいくはずですが、何らかの理由でk[i]が未定義の値を返します。以下は、ページのロードにトリガー新しい関数内にある：誰かが私が私が間違っているつもりだどこの周りに頭を得るのを助けることができれば

var k = document.getElementsByTagName("td"); 

for(var i = 0; i < k.length; i++){ 
    k[i].addEventListener("click", function(evt) { 
     k[i].textContent = "Success!"; 
    }); 
} 

は、私は本当に感謝されると思います！

Answer 1

evt.target.textContent = "Success!"; 

の代わりに：

k[i].textContent = "Success!"; 

グッドラック！デモでは、問題は、変数のスコープです

var k = document.getElementsByTagName("td"); 
 

 
for(var i = 0; i < k.length; i++){ 
 
    k[i].addEventListener("click", function(evt) { 
 
     evt.target.textContent = "Success!"; // ⚠️ So you have to do this 
 
    }); 
 
}

<table style="width:100%"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
</table>

Answer 2

を下回っています。イベントリスナーが呼び出されると、iはイベントリスナーが作成された時刻と異なり、k[i]には未定義の変数が含まれています。ソリューションはAbdennourによって書かれています

Answer 3

Tomas氏によると、問題は可変範囲であり、回答の代わりにthisというキーワードを使用できます。 ここで働くバイブルです。 https://jsfiddle.net/d9pzyf15/1/

HTML

<table> 
    <tr> 
    <td class="thing"> 1 </td> 
    <td class="thing"> 2 </td> 
    </tr> 
</table> 

JS

let tds = document.getElementsByTagName('td') 
for(let i = 0; i < tds.length; i++){ 
    tds[i].addEventListener('click', function(ev) { 
    this.textContent = 'Changed' 
    }); 
} 

EDITコメントでAbdennourによって示唆されるように

、これはES6の矢印機能

0を使用しての答えだろう

Answer 4

上記のような問題は、スコープです。

@abdennourのようにtargetを使用できますが、利用できないことがあります。

範囲をキャプチャする最も簡単な方法esnextのものを使用している場合、...、VARをキャプチャするためにletを使用

es5を使用して別の方法であればある..キャプチャする匿名関数を呼び出す自己を使用している

以下は3つの例です。esNextがコメントアウトされています。 2番目のesnextは新しいfor ofを使用しています。ご注意ください、for inではありません。

var k = document.getElementsByTagName("td"); 
 

 
for(var i = 0; i < k.length; i++){ 
 
    (function (e) { 
 
    e.addEventListener("click", function(evt) { 
 
     e.textContent = "Success!"; 
 
    }); 
 
    })(k[i]); 
 
} 
 

 
/*or use esnext stuff*/ 
 
/*for(var i = 0; i < k.length; i++){ 
 
    let e = k[i];  
 
    e.addEventListener("click", function(evt) { 
 
     e.textContent = "Success!"; 
 
    }); 
 
}*/ 
 

 
/*or maybe use the for of.. note not for in*/ 
 
/* 
 
for (let e of document.getElementsByTagName("td")) { 
 
    e.addEventListener("click", function(evt) { 
 
    e.textContent = "Success!"; 
 
    }); 
 
}*/

<table> 
 
<tbody> 
 
<tr> 
 
<td>one</td> 
 
<td>two</td> 
 
<td>three</td> 
 
</tr> 
 
</tbody> 
 
</table>