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

我有一个表单，我需要动态地填充（使用Google Closure生成的）标签。我得到了它在铬工作，但是当我在Firefox中尝试了它不会工作，并失败，出现以下错误：我无法通过Firefox中的“for”属性访问标签，但可以在Chrome中使用

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

然而使用本机调试控制台铬它的工作原理（不同的值值=和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>]

下面是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经验，所以我对非最优代码表示歉意。任何帮助表示赞赏，谢谢！

来源

2013-10-03 dstudeba

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

试试这个：

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

只要确保ID一定的参考你的元素的ID。您当前的代码是很奇怪......几乎看起来像你有相同ID的多个元素...

来源

2013-10-03 00:21:29

如果返回的元素是一个表单，那么这些控件可以通过索引获得，所以'getElementById（'formId'）[0]'会引用表单中的第一个控件（如果有的话）。 * cf. *'form.elements [0]'。 – RobG

@RobG函数'getElementById'意味着一个。获取*元素*，而不是元素* s * –

是的，在这种情况下，它返回一个表单元素，所以'form [n]'将返回表单中的第n个控件（在这种情况下是一个输入元素）或* undefined *如果没有一个。这不是很好的代码，但它“起作用”。也不确定OP是否想要替换标签的全部内容，或仅仅是文本（因为输入元素可能是标签的子元素或兄弟元素）。 – RobG

看来：

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

是与id="price1" ... name="price"输入的参考。你也可以使用获得此相同的元素：

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

但无论如何，对于HTMLInputElement接口不包含一个标签财产。你期望它做什么，返回相关的标签（如果有的话）？

您需要说明您正在尝试做什么并发布DOM的相关部分，最好是HTML。

来源

2013-10-03 00:51:05 RobG

感谢您的输入RobG，是的，我希望它通过标签的for =属性返回与其关联的标签。在铬这似乎工作，但我想这不是标准。此外，通过name属性获取元素的问题在于它是一组单选按钮，因此三个按钮具有相同的名称。再次感谢您的时间，下次我会更清楚我正在尝试做什么。 – dstudeba

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

回答

相关问题