您的主要问题

Question

我整个早上一直在绞尽脑汁。在我的HTML代码中，我有一个包含字母a - j的列表，并希望在单击时控制对象的日志。

我创建了一个for循环来运行节点列表，我可以让控制台的脚本注销掉被点击的元素的编号，但是一旦我尝试获取{{1}或类似的东西它返回undefined。

但是当我只是在控制台输入innerHTML时，它会返回我想要的字母。

请帮助我理解为什么只是因为它经过一个el[3].innerHTML循环才会使它未定义？

我不只是在寻找解决方案，而且还要了解它为什么会这样，这样我才能成为更好的编码器。

谢谢！

代码：

for

Answer 1

您错过了变量名称：

的console.log（this.innerHTML）;

＆＃13;

var list = document.getElementsByTagName('ul')[0];
var el = list.getElementsByTagName('li');

console.log(el)

  for(var i = 0; i < el.length; i++ ) {
  el[i].addEventListener("click",function(f){

    return function(event){
        event.preventDefault();
        console.log(this.innerHTML);
    };
  }(i));
}

＆＃13;

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

＆＃13;

Answer 2

当您将i作为参数传递给函数时，f会获得i的值，所以当您尝试获取f.innerHTML时，您试图获取来自整数的HTML，而不是来自被点击的元素。

您可以使用this来定位点击的元素。这是一个有效的例子：

var list = document.getElementsByTagName('ul')[0];
var el = list.getElementsByTagName('li');

  for(var i = 0; i < el.length; i++ ) {
  el[i].addEventListener("click",function(f){

    return function(event){
        event.preventDefault();
        console.log(this.innerHTML);
    };
  }(i));
}

<ul>List
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

感谢@Teemu编辑了更正的信息。

Answer 3

这是工作示例，我认为传递正确的元素

是个问题

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]));
}

Answer 4

您的主要问题

正如@teemu在评论中提到的那样f是event对象。要访问innerHtml，您需要访问target。

观

目前，您有<li>个元素eventListener。您<ul>只能拥有一个更清洁的代码库。

代码

将eventListener添加到<ul>时，您可以通过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)

function logInnerHtml(event) {
  console.log(event.target.innerHTML)
}

<ul>
  <li>first</li>
  <li>second</li>
</ul>

循环innerHTML的JavaScript返回为undefined

4 个答案:

您的主要问题

观

代码

实施例