試圖理解[對象HTMLCollection] JavaScript .innerHTML右函數？

我是JavaScript的新手。我試圖得到我認爲簡單的「onchange」事件來處理輸入表單元素，並讓JavaScript函數使用.innerHTML回寫輸入的值。試圖理解[對象HTMLCollection] JavaScript .innerHTML右函數？

這裏是我的輸出如下：

名*

你好[對象的HTMLCollection]

如何應對變量返回的消息「[對象的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>

我知道這可能是簡單的東西。有人請把我踢向正確的方向！

來源

2014-05-04 user3601425

document.getElementsByName("first_name");返回匹配選擇器的元素集合，nodeList。

請注意sgetElements...每當您看到這種情況時，可能有多個元素可能匹配，並且會返回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

來源

2014-05-04 15:25:34 adeneo

試圖理解[對象HTMLCollection] JavaScript .innerHTML右函數？

回答

相關問題