Question

我是JavaScript的新手。我试图得到我认为是一个简单的“onchange”事件来处理输入表单元素并让JavaScript函数使用.innerHTML写回输入的值。

以下是我的输出结果：

名字*

Hello [object HTMLCollection]

如何处理返回“[object HTMLcollection]”消息的变量请明确回答，因为正如我所说，我是javascript的新手。

这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onchange event Testing input text</title>
<script type="text/javascript">
<!--
function write_firstname()
{
var fnid = document.getElementById("fnm");
var fn = document.getElementsByName("first_name");

fnid.innerHTML = "Hello " + fn;
}
//-->
</script>
</head>
<body>
<form>
<!---->
<label for="first">First Name *</label>
<br />
<div class="form_indent">

    <input id="first" type="text" name="first_name" onChange="write_firstname();" autofocus>
    <p id="fnm"></p>
    <br />
</div>
<!----> 
<!---->
<div class="form_indent">
    <input type="submit" value="Submit">
    &nbsp;&nbsp;&nbsp;
    <input type="reset" value="Reset">
</div>
<!---->
</form>
</body>
</html>

我知道这可能很简单。有人请我朝正确的方向踢我！

Answer 1

document.getElementsByName("first_name");返回与选择器匹配的元素集合nodeList。

每次看到s时都注意getElements...，有多个元素可以匹配，并返回一个nodeList而不是单个DOM节点。

nodeList是一个包含元素的类数组对象，所以你试图将一个对象添加到一个字符串中，并且由于这不可能，javascript会运行toString()来转向将nodeList转换为字符串，字符串表示为[object HTMLCollection]

你可以做的只是将元素传递给函数

<input id="first" type="text" name="first_name" onchange="write_firstname(this);" autofocus>

然后再做

function write_firstname(elem) {
    var fnid = document.getElementById("fnm");

    fnid.innerHTML = "Hello " + elem.value;
}

FIDDLE

试图理解[对象HTMLCollection]来自JavaScript .innerHTML正确的功能？

1 个答案: