为什么这个javascript会抛出这个特殊错误？

Question

在我的HTML代码中,我有一个按钮,按下时会运行一个javascript函数.这是按钮的HTML代码:

<button type="button" onclick="repeatName()">Click me!</button>

我希望用户在文本字段中输入内容(在表单内部).这是文本字段的代码:

<input type="text" name="txtName" />

我希望在按下按钮后根据名称文本框中输入的信息更改div的innerHTML.这是div的代码:

<div name="editThis" width="50px" height="50px" border="1px">

</div>

单击该按钮时,我希望它运行下面的功能.它应该改变div的innerHTML.

function repeatName() {
    var editField = document.getElementsByName("editThis").innerHTML;
    var repeatedName = document.theForm.txtName.value;

    editField = (repeatedName + " is the value.")

}

问题是,无论何时单击按钮,我都会在Firefox错误控制台中看到此错误:

Error: uncaught exception: [Exception... "Cannot modify properties of a WrappedNative"  nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_PROP_ON_WN)"  location: "JS frame :: chrome://global/content/bindings/autocomplete.xml :: onxblpopuphiding :: line 825"  data: no]

这个错误是什么？我该如何纠正？

Answer 1

根据文档,document.getElementsByName(str)返回"元素列表".

很明显,"元素列表"没有单一的.innerHTML属性.我猜这个具体的错误与你的浏览器内部机制有关,它以自己的方式表示该列表WrappedNative.

迭代结果; 在您的情况下,您只需要第一个结果,所以使用数组访问器语法来获取它[0].

但是,由于name属性与表单组件相关,因此您应该使用id.通过ID检索元素更容易,因为ID [应该]是唯一的.

此外,由于Javascript没有引用,因此您无法存储innerHTML变量并更改它,期望原始属性发生更改; 您必须在您注明的同一声明中进行作业innerHTML:

function repeatName() {
    var editField = document.getElementsById("editField");
    var repeatedName = document.theForm.txtName.value;

    editField.innerHTML = repeatedName + " is the value."
}