Question

我有一个简单的表单，其中一些字段通过JS设置为“只读”。

我不明白为什么这行在我的代码中起作用：

mainForm[readonlyElms[i].id].setAttribute("readonly", "readonly");

然而这一行引发了一个错误“Uncaught TypeError：无法读取未定义的属性'0'：

mainForm.readonlyElms[i].id.setAttribute("readonly", "readonly");

（简化形式）：

<form>
 <input type="text" id="fname">
 <input type="text" id="lname">
 <input type="text" id="dob">
 <input type="tel" id="tel">    
</form>

JS

var mainForm = document.forms[0];
var readonlyElms = [fname, lname, dob];
for (var i = 0, len = readonlyElms.length;
i < len;
i++) {

        //this line does the job
        //mainForm[readonlyElms[i].id].setAttribute("readonly", "readonly");

        //BUT why not this line???
        mainForm.readonlyElms[i].id.setAttribute("readonly", "readonly");
    }

我很难说出问题标题，所以如果使用的条款不正确，请更正。

由于

Answer 1

这些行做的事情非常不同。

第一个：

mainForm[readonlyElms[i].id].setAttribute("readonly", "readonly");

获取readonlyElms[i]的值，然后获取其id属性的值，然后使用该值在mainForm上查找具有该名称的属性，然后调用{{ 1}}就可以了。

第二个：

setAttribute

...在mainForm.readonlyElms[i].id.setAttribute("readonly", "readonly");上查找名为mainForm的属性，尝试从中获取名称来自readonlyElms的属性，然后尝试获取该对象的i 1}}，然后尝试在id的值上调用setAttribute。

原因是这两种语法的工作方式不同：

括号表示法允许括号内的任何表达式，计算表达式，将结果强制转换为字符串（如果需要），然后使用该字符串定义的名称查找属性。

Dot notation使用您在代码中键入的 literal 属性名称。

例如，id 总是在obj.foo上查找foo属性，而obj正在查找属性名称是什么由obj[foo]变量（可能是foo或其他任何东西）持有。

有时示例有帮助：

"fluglehorn"

为什么我不能使用点语法而不是关联文件来访问表单元素id属性

1 个答案: