我无法通过 Firefox 中的“for”属性访问标签，但可以在 Chrome 中访问标签

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

本文关键字：标签 访问 属性 但可以 Chrome for Firefox 中的      更新时间：2023-09-26

我有一个表单，我需要动态填充标签（这是用谷歌闭包生成的）。 我让它在 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= 和 adoptname= 的不同值是由于动态重用表单）

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

以下是从Google Closure编译器中出来的html表单代码：

// 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 经验，所以我为非最佳代码道歉。 任何帮助不胜感激，谢谢！

我想

这意味着Firefox不支持.labels属性。

试试这个：

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

只需确保ID是对元素 ID 的引用即可。你现在的代码真的很奇怪...看起来您几乎有多个具有相同 ID 的元素......

似乎：

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

是对带有 id="price1" ... name="price" 的输入的引用。您也可以使用以下方法获取相同的元素：

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

但无论如何，HTMLInputElement 的接口不包含标签属性。您希望它做什么，返回关联的标签（如果有）？

你需要说出你想做什么，并发布DOM的相关部分，最好是HTML格式。

相关文章：