Я не могу получить доступ к меткам через атрибут "for" в Firefox, но могу в Chrome

У меня есть форма, которая мне нужна для динамического заполнения меток (которая была создана с помощью Google Closure). Я получил это работает в Chrome, но когда я попробовал это в Firefox, это не сработало, и терпит неудачу со следующей ошибкой:

TypeError: this.document.getElementById(...)[$i].labels is undefined
....document.getElementById('dialog-form')[$i].labels[0].innerHTML = "$" + varNewPr...

Исследуя через консоль Firebug, я получаю следующую ошибку:

>>> 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

Однако, используя встроенную консоль отладки в Chrome, она работает (различные значения для value = и acceptname = обусловлены динамическим повторным использованием формы).

>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>​]

Вот код HTML-формы после того, как он вышел из компилятора Google Closure:

// 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>

    ...;

};

Код JavaScript здесь:

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;
    }
....
}

Последняя строка в коде выдает ошибку в Firefox. Я также использую JQuery и не имею большого опыта работы с javascript, поэтому извиняюсь за неоптимальный код. Любая помощь приветствуется, спасибо!

Источник

2 ответа

Решение

Я думаю, это означает, что Firefox не поддерживает .labels имущество.

Попробуйте это вместо этого:

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

Просто убедитесь, что ID некоторая ссылка на идентификатор вашего элемента. Ваш текущий код действительно странный... похоже, у вас есть несколько элементов с одинаковым идентификатором...

Источник

Кажется, что:

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

ссылка на вход с id="price1" ... name="price", Вы также можете получить этот же элемент, используя:

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

Но в любом случае, интерфейс для HTMLInputElement не содержит свойства меток. Что вы ожидаете от него, вернуть соответствующий ярлык (если он есть)?

Вы должны сказать, что вы пытаетесь сделать, и опубликовать соответствующую часть DOM, желательно в формате HTML.

Источник
Другие вопросы по тегам