試圖從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