为什么这个javascript会抛出这个错误呢?

In my HTML code I have a button that when pressed runs a javascript function. This is the HTML code for the button:

在我的HTML代码中，我有一个按钮，按下它后运行一个javascript函数。这是按钮的HTML代码:

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

I want the user to enter something into a text field (which is inside of a form). This is the code for the text field:

我希望用户将一些内容输入到文本字段中(文本字段位于表单内部)。这是文本字段的代码:

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

I want this div's innerHTML to be changed according to the information put in the name textbox once the button is pressed. This is the code for the div:

我希望这个div的innerHTML在按钮被按下后，根据名称文本框中的信息进行更改。这是div的代码:

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

</div>

When the button is clicked, I want it to run the function below. It is supposed to change the innerHTML of the div.

单击按钮时，我希望它运行下面的函数。它应该更改div的innerHTML。

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

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

}

THE PROBLEM IS that whenever the button is clicked, I see this error in the Firefox error console:

问题是，每当单击按钮时，我都会在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]

What is this error and how can I correct it?

这个错误是什么，我怎么改正?

3 个解决方案

#1

According to the documentation, document.getElementsByName(str) returns "a list of elements".

根据文档，document.getElementsByName(str)返回“元素列表”。

It's clear that "a list of elements" doesn't have a singular .innerHTML property. I'd guess that the specific error relates to your browser's internal mechanism for representing that list in its own WrappedNative type.

很明显，“元素列表”没有唯一的. innerhtml属性。我猜想，特定的错误与您的浏览器的内部机制有关，该机制用自己的WrappedNative类型表示列表。

Iterate the results instead; in your case, you only need the first result, so get it with the array accessor syntax [0].

迭代结果相反;在您的示例中，您只需要第一个结果，因此使用数组访问器语法[0]获取它。

But, since name properties relate to form components, you should use id instead. Retrieving an element by ID is easier, since IDs are [supposed to be] unique.

但是，由于名称属性与表单组件相关，所以应该使用id。通过ID检索元素更容易，因为ID是惟一的。

Also, since Javascript has no references, you cannot store innerHTML in a variable and change it expecting the original property to change; you must make the assignment in the same statement in which you notate innerHTML:

而且，由于Javascript没有引用，所以不能将innerHTML存储在变量中，并更改它，以期望原始属性发生更改;您必须在您不使用innertate html的相同语句中完成作业:

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

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

#2

I think Tomalak has it right. Alternately, you can give your div an id, and then use getElementById, which will return a single object and not a collection.

我认为托玛拉克说得对。或者，您可以给您的div一个id，然后使用getElementById，它将返回一个对象，而不是一个集合。

i.e.

即。

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

#3

Div elements don't have a name attribute, so use an id instead.

Div元素没有名称属性，所以应该使用id。

<div id="editThis" ...>

Then use:

然后使用:

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

#1