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 <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".

Answer 1

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