title: document.getElementsByClassName().innerHTML always returns "undefined"
body: <p>I must have made a mistake somewhere so the <code>document.getElementsByClassName().innerHTML</code> is always returning <strong>undefined</strong>.</p>
  
  <p>First i generate the <code>&lt;li&gt;</code> via javascript :            </p>
  
  <pre><code>$('#list').append('&lt;li class="box"&gt;&lt;img class="picture" src="images/HotPromo/tagPhoto1.png"/&gt;&lt;p class="name"&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/p&gt;&lt;p class="address"&gt;Address&lt;/p&gt;&lt;p class="hidden"&gt;&lt;/p&gt;&lt;/li&gt;');
  </code></pre>
  
  <p>Note that in the most right i have a <code>&lt;p&gt;</code> element with <code>hidden</code> class. I use this to get the <strong>id</strong> which i dont want to show to my users.</p>
  
  <p>And this is the jQuery to generate the data on those <code>&lt;li&gt;</code> :</p>
  
  <pre><code>$(".box").each(function () {
      var name, address, picture, id = "";
      if (i &lt; 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++;
  });
  </code></pre>
  
  <p>I have tried to check the data, and its working fine.</p>
  
  <p>Now, lets say i want to alert the hidden <strong>id</strong> <code>&lt;p&gt;</code> when user clicks one of those <code>&lt;li class="box"&gt;</code> that i generated above:</p>
  
  <pre><code>$(".box").click(function () {
      alert(document.getElementsByClassName('hidden').innerHTML);
  });
  </code></pre>
  
  <p>However this alert always returning "<strong>undifined</strong>".</p>