document.getElementsByClassName（）。innerHTML总是返回“undefined” [英] document.getElementsByClassName().innerHTML always returns "undefined"

问题描述

我一定在某处犯了错，所以 document.getElementsByClassName（）。innerHTML 总是返回 undefined 。

首先我通过javascript生成< li> ：

  $（'＃list'）。append（'< li class =box>< img class =picturesrc =images / HotPromo / tagPhoto1.png/> < p class =name>< b>名称< / b>< / p>< p class =address>地址< / p>< p class =hidden><< p ; / p>< /立GT;'）; 
  

请注意，在最右边，我有一个< p> 元素与隐藏类。我使用它来获取我不想显示给我的用户的 id 。

这是用于生成这些数据的jQuery < li> ：

  $（。box）。 each（function（）{
 var name，address，picture，id =; 
 if（i< result.length）{
 name = result [i] .name; 
 address = result [i] .address; 
 picture = result [i] .boxpicture; 
 id = result [i] .mallid; 
} 
 
 $（this）.find（。name）。html（name）; 
 $（this）.find（。address）。html（address）; 
 $（this）。 find（。picture）。attr（src，picture）; 
 $（this）.find（。hidden）。html（id）; 
 i ++; 
} ）; 
  

我试图检查数据，并且它的工作正常。

现在，假设用户点击其中一个<$>时，我想提醒隐藏的 id < p>

  c $ c>< li class =box>  $（。box）。click（function（）{
 alert（document.getElementsByClassName（'hidden'）。innerHTML）; 
}）; 
  

但是，此警报总是返回未定义的。

解决方案> document.getElementsByClassName（）返回一个nodeList，而不是一个元素！

所以它应该是：

$ p $ document.getElementsByClassName（'hidden'）[0 ] .innerHTML


并且您可能有更多 .hidden 元素，并且只需要当前 .box 中的一个（这将是 this 在事件处理程序中）

  this.getElementsByClassName（'hidden'）[0] .innerHTML 
  

但是为什么不是jQuery

  $（。box ）.click（function（）{
 alert（$（'。hidden'，this）.html（））; 
}）; 
  

I must have made a mistake somewhere so the document.getElementsByClassName().innerHTML is always returning undefined.

First i generate the <li> via javascript :

$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p><p class="hidden"></p></li>');

Note that in the most right i have a <p> element with hidden class. I use this to get the id which i dont want to show to my users.

And this is the jQuery to generate the data on those <li> :

$(".box").each(function () {
    var name, address, picture, id = "";
    if (i < result.length) {
        name = result[i].name;
        address = result[i].address;
        picture = result[i].boxpicture;
        id = result[i].mallid;
    }

    $(this).find(".name").html(name);
    $(this).find(".address").html(address);
    $(this).find(".picture").attr("src", picture);
    $(this).find(".hidden").html(id);
    i++;
});

I have tried to check the data, and its working fine.

Now, lets say i want to alert the hidden id <p> when user clicks one of those <li class="box"> that i generated above:

$(".box").click(function () {
    alert(document.getElementsByClassName('hidden').innerHTML);
});

However this alert always returning "undifined".

解决方案

document.getElementsByClassName() returns a nodeList, not an element!

So it should be :

document.getElementsByClassName('hidden')[0].innerHTML

and as you probably have more .hidden elements, and only want the one inside the current .box (which would be this in the event handler)

this.getElementsByClassName('hidden')[0].innerHTML

but why not jQuery

$(".box").click(function(){
        alert( $('.hidden', this).html() );
});

这篇关于document.getElementsByClassName（）。innerHTML总是返回“undefined”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！