document.getElementsByClassName().innerHTML always returns "undefined"

Question

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

` via javascript : ``` $('#list').append('

Name

Address

'); ``` Note that in the most right i have a `

` 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 `

` : ``` $(".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…

Accepted Answer

`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 always returns "undefined"

Solution

Problem