循环innerHTML的JavaScript返回为未定义

我整个上午都在为这事绞尽脑汁。在我的HTML代码中，我有一个包含字母a-j的列表，并希望在单击该字母时控制台记录该字母

我已经创建了一个

for

循环来运行节点列表，我可以让脚本控制台注销正在单击的元素的编号，但只要我尝试获取

innerHTML

或类似的内容，它就会返回未定义的内容

但当我在控制台中键入

el[3].innerHTML

时，它会返回我想要的字母

请帮助我理解为什么仅仅因为它正在经历一个

for

循环，它就使得它未定义

我不仅在寻找解决方案，还想了解为什么会发生这种情况，这样我才能成为一名更好的程序员

谢谢

代码：

var list=document.getElementsByTagName（'ul'）[0]；
var el=list.getElementsByTagName（'li'）；
对于（变量i=0；i

在以下位置缺少变量的名称：

log（this.innerHTML）

var list=document.getElementsByTagName（'ul'）[0]；
var el=list.getElementsByTagName（'li'）；
控制台日志（el）
对于（变量i=0；i

一,
二,
三,

当您将

i

作为参数传递到函数中时，

f

接受

i

的值，因此当您尝试获取

f.innerHTML

时，您试图从整数中获取HTML，而不是从单击的元素中获取HTML

您可以使用

此

以单击的元素为目标。以下是一个工作示例：

var list=document.getElementsByTagName（'ul'）[0]；
var el=list.getElementsByTagName（'li'）；
对于（变量i=0；i

列表
项目1
项目2
项目3
项目4

这里是一个工作示例，我认为这是传递正确元素的问题

var list = document.getElementsByTagName('ul')[0];
   var el = list.getElementsByTagName('li');

   for(var i = 0; i < el.length; i++ ) {
   el[i].addEventListener("click",function(e){

     return function(event){
      event.preventDefault();
      console.log(e.innerHTML);
   };
 }(el[i]));
}

var list=document.getElementsByTagName（'ul'）[0]；
var el=list.getElementsByTagName（'li'）；
对于（变量i=0；i

您的主要问题 正如你的

f

在评论中提到的，对象就是这个。要访问

innerHtml

，您需要在之前访问

target

主意 当前您有n个

元素和一个

事件监听器

。您的

上只能有一个，这样代码库就更干净了

代码 将eventListener添加到

时，您可以通过

event.target

访问其中单击的每个元素

var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', logInnerHtml)

function logInnerHtml(event) {
    event.preventDefault()
    console.log(
        event.currentTarget.innerHtml
    )
}

例子

var list=document.getElementsByTagName（'ul'）[0]；
list.addEventListener（'click'，logInnerHtml）
函数logInnerHtml（事件）{
log（event.target.innerHTML）
}

首先
第二

在li写入页面之前，脚本是否在页面顶部？注意字母不是元素的元素，如果没有其他元素，您应该只看到一个测试节点字符串。可能函数中没有定义f，您可以用html或plunker示例进行快速测试吗？可能重复的

f===i

和

i

是一个整数，它不具有上述属性，这使得整个生命变得不必要。嗯。。。事件对象是我不正确的陈述，有一个新的，更正确的评论，到现在已经有将近一个小时了。

var list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', logInnerHtml)

function logInnerHtml(event) {
    event.preventDefault()
    console.log(
        event.currentTarget.innerHtml
    )
}