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.