Javascript：单击更改表中的字符串

我正在学习一门Javascript课程（对该语言来说还是很新的），并试图解决这个问题。基本上，我需要添加一个事件侦听器，当单击时，它会将

行中的字符串更改为其他内容

现在理论上，我在下面写的应该是可行的（我认为），但出于某种原因，

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!";
    });
}

var k=document.getElementsByTagName（“td”）；
对于（变量i=0；i

如果有人能帮我弄清楚哪里出了问题，我会非常感激的

    evt.target.textContent = "Success!";

而不是：

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

祝你好运！下面是演示 而不是：

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

---

祝你好运！演示如下问题是范围可变。调用事件侦听器时，

i

与创建事件侦听器时不同，因此

k[i]

包含未定义的变量。解决方案由Abdennour TOUMI编写

问题的范围是可变的。调用事件侦听器时，

i

与创建事件侦听器时不同，因此

k[i]

包含未定义的变量。解决方案由Abdennour TOUMI编写

正如Tomas所说，问题在于您的变量范围，您可以使用

这个

关键字来替代他的答案。 这是一把小提琴。

HTML

1.
2.

JS

让tds=document.getElementsByTagName（'td'））
for（设i=0；i

编辑

正如Abdennour在评论中所建议的，这将是使用ES6箭头函数的答案

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

让tds=document.getElementsByTagName（'td'））
for（设i=0；i{
ev.target.textContent='Changed'
});
}

正如托马斯所说，问题在于你的变量范围，作为他的答案的替代，你可以使用

这个

关键字。 这是一把小提琴。

HTML

1.
2.

JS

让tds=document.getElementsByTagName（'td'））
for（设i=0；i

编辑

正如Abdennour在评论中所建议的，这将是使用ES6箭头函数的答案

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

让tds=document.getElementsByTagName（'td'））
for（设i=0；i{
ev.target.textContent='Changed'
});
}

前面提到的问题是范围

您可以像@abdennour这样使用

目标

，但有时这些可能不可用

如果使用

esnext

stuff，捕获范围的最简单方法是使用

let

捕获var

如果使用

es5

，另一种方法是使用自调用匿名函数来捕获

下面是三个示例，注释掉了

esNext

one的。第二个

esnext

使用新的

for of

，construct。。请注意，不适用于中的

var k=document.getElementsByTagName（“td”）；
对于（变量i=0；i


一
二
三
前面提到的问题是范围

您可以像@abdennour这样使用
目标
，但有时这些可能不可用

如果使用
esnext
stuff，捕获范围的最简单方法是使用
let
捕获var

如果使用
es5
，另一种方法是使用自调用匿名函数来捕获

下面是三个示例，注释掉了
esNext
one的。第二个
esnext
使用新的
for of
，construct。。请注意，不适用于中的


var k=document.getElementsByTagName（“td”）；
对于（变量i=0；i


一
二
三
此
在回调作为简单函数时有效。。对于回调为箭头函数无效。在两种情况下，
event.target
valid@AbdennourTOUMI有趣的是，我不知道这个，谢谢你的评论。
这个
作为一个简单的回调函数是有效的。。对于回调为箭头函数无效。在两种情况下，
event.target
valid@AbdennourTOUMI有意思，我不知道，谢谢你的评论。不客气，不客气