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."
}

Answer 2

我认为Tomalak是对的。或者，您可以为div提供id，然后使用getElementById，它将返回单个对象而不是集合。

即

<div id="editThis" .... > .... </div>
...
...
document.getElementById("editThis").innerHTML = repeatedName + " is the value";

Answer 3

Div元素没有name属性，因此请改用id。

<div id="editThis" ...>

然后使用：

function repeatName() {
  var editField = document.getElementById("editThis");
  if (editField) {
    editField.innerHTML = document.theForm.txtName.value + ' is the value';
  }
}

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

3 个答案: