I can't access labels via "for" attribute in Firefox, but can in Chrome

I can't access labels via "for" attribute in Firefox, but can in Chrome

I have a form which I need to dynamically populate the labels of (which
was generated with Google Closure). I got it working in chrome, but when I
tried it in Firefox it wouldn't work, and fails with the following error:
TypeError: this.document.getElementById(...)[$i].labels is undefined
....document.getElementById('dialog-form')[$i].labels[0].innerHTML = "$" +
varNewPr...
Examining through the Firebug console I get the following error:
>>> this.document.getElementById('dialog-form')[4]
<input id="price1" type="radio" value="1" percentage="90" adoptname="90"
name="price">
>>> this.document.getElementById('dialog-form')[4].labels
undefined
However using the native debugging console in chrome it works (the
different values for value= and adoptname= are due to dynamically reusing
the form)
>this.document.getElementById('dialog-form')[4]
<input type=&#8203;"radio" name=&#8203;"price" adoptname=&#8203;"180"
id=&#8203;"price1" percentage=&#8203;"90" value=&#8203;"2">&#8203;
>this.document.getElementById('dialog-form')[4].labels
[<label class=&#8203;"adopt-label"
for=&#8203;"price1">&#8203;$0&#8203;</label>&#8203;]
Here is the html form code after it came out of the Google Closure compiler:
// This file was automatically generated from basic.soy.
// Please don't edit this file by hand.
if (typeof examples == 'undefined') { var examples = {}; }
if (typeof examples.simple == 'undefined') { examples.simple = {}; }
examples.simple.adoptForm = function(opt_data, opt_ignored) {
return '<div class="adopt-general">
<div class="adopt-header">
....
<ul class="adopt-list">
<li><label>Tell me if the price drops below:</label>
<li><input type="radio" name="price" adoptname="$' +
soy.$$escapeHtml(Math.round(opt_data.price * 0.9)) + '" id="price1"
percentage="90" value="' + soy.$$escapeHtml(opt_data.itemNumber) + '" />
<label class="adopt-label" for="price1">$' +
soy.$$escapeHtml(Math.round(opt_data.price * 0.9)) + '</label>
<input type="radio" name="price" adoptname="$' +
soy.$$escapeHtml(Math.round(opt_data.price * 0.8)) + '" id="price2"
percentage="80" value="' + soy.$$escapeHtml(opt_data.itemNumber) + '" />
<label class="adopt-label" for="price2">$' +
soy.$$escapeHtml(Math.round(opt_data.price * 0.8)) + '</label>
<input type="radio" name="price" adoptname="$' +
soy.$$escapeHtml(Math.round(opt_data.price * 0.7)) + '" id="price3"
percentage="70" value="' + soy.$$escapeHtml(opt_data.itemNumber) + '" />
<label class="adopt-label" for="price3">$' +
soy.$$escapeHtml(Math.round(opt_data.price * 0.7)) + '</label></ul>
...;
};
The javascript code is here:
for(var $i = 0; $i < $myDialogLength; $i++){
this.document.getElementById('dialog-form')[$i].setAttribute("value",skuNumber);
this.document.getElementById('dialog-form')[$i].checked = false;
if(this.document.getElementById('dialog-form')[$i].getAttribute("percentage")
!== null){
varIdNum =
this.document.getElementById("dialog-form")[$i].getAttribute("percentage");
var varNewPrice = (varIdNum*price/100);
this.document.getElementById('dialog-form')[$i].setAttribute("adoptname",varNewPrice);
this.document.getElementById('dialog-form')[$i].labels[0].innerHTML
= "$" + varNewPrice;
}
....
}
The last line in the code is throwing the error in Firefox. I am using
JQuery also and do not have much javascript experience so I apologize for
the non-optimal code. Any help is appreciated, thanks!