javascript - 为什么这个 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

根据 the documentation , 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."
}