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

Question

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=​"radio" name=​"price" adoptname=​"180" id=​"price1" percentage=​"90" value=​"2">​
>this.document.getElementById('dialog-form')[4].labels
[<label class=​"adopt-label" for=​"price1">​$0​</label>​]

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!

Answer 1

I guess that means Firefox doesn't support the .labels property.

Try this instead:

document.querySelector("[for='"+ID+"']").innerHTML = "$"+varNewPrice;

Just make sure that ID is some reference to the ID of your element. Your current code is really weird... it almost looks like you have multiple elements with the same ID...

Answer 2

It seems that:

this.document.getElementById('dialog-form')[4]

is a reference to an input with id="price1" ... name="price". You could also get this same element using:

this.document.forms['dialog-form'].price

But anyway, the interface for HTMLInputElement doesn't included a labels property. What do you expect it to do, return the associated label (if there is one)?

You need to say what you are trying to do and post a relevant part of the DOM, preferably as HTML.