Why doesn't this object reference work?
<p>I'm trying to populate this list with strings from the object data. It comes out as 'undefined'. It's the reference to the data object that doesn't work. Why?</p>

<p><b>JS</b></p>

<pre><code>data = [
        {"q":"How much?", "ac":"20%", "a1": "1%", "a2": "10%", "a3": "5%"},
        {"q":"What", "ac":"Ball", "a1": "Stone", "a2": "Bierd", "a3": "Carl"},
        {"q":"When?", "ac":"1999", "a1": "2000", "a2": "2001", "a3": "2002"}
        ];      

var q=0

window.onload = function() {
    var ids =['a','b','c','d'];
    var ans =['a1','a2','a3','ac'];
    for (var j=0; j &lt; ids.length; j++) {
    var a = ans[j];
    document.getElementsByClassName(ids[j])[0].innerHTML = data[q].a; //[&lt;-- PROBLEM HERE]

};
}
</code></pre>

<p><b>HTML</b></p>

<pre><code>&lt;ul class="answers_quiz"&gt;
&lt;li class="a"&gt;&lt;/li&gt;
&lt;li class="b"&gt;&lt;/li&gt;
&lt;li class="c"&gt;&lt;/li&gt;
&lt;li class="d"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
