试图从JavaScript .innerHTML正确的功能中理解[object HTMLCollection]吗？

Question

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

这是我的输出结果：

名字 *

您好[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匹配的元素的集合。

请注意getElements...的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;
}

小提琴

试图从JavaScript .innerHTML正确的功能中理解[object HTMLCollection]吗？

问题描述

1 个解决方案

解决方案1
1 2014-05-04 15:25:34

试图从JavaScript .innerHTML正确的功能中理解[object HTMLCollection]吗？

问题描述

1 个解决方案

解决方案1 1 2014-05-04 15:25:34

解决方案1
1 2014-05-04 15:25:34