javascript - 当我尝试打印到 textarea 字段时，数据被 [object NodeList] 替换

Question

我正在尝试制作一个带有一些输入字段的表单，然后获取这些输入字段并将它们放入文本区域字段中。

这是我的 JS 脚本:

    function sayDetails() {

    var name = document.getElementsByName("userName"),
    address = document.getElementsByName("userAddress"),
    city = document.getElementsByName("userCity"),
    email = document.getElementsByName("userEmail"),
    final_txt = "Name: " + name + "Address: " + address + "City: " + city + "Email: " + email;

    document.getElementById("outputArea").innerHTML = final_txt;

    return false;
}

这是我的 html:

<div class="form">
<form name="userDetails">

Name:    <input type="text" name="userName" id="uName" required><br>
Address: <input type="text" name="userAddress" id="uAddress"><br>
City:    <input type="text" name="userCity" id="uCity"><br>
Email:   <input type="text" name="userEmail" id="uEmail" required><br>
</form>
<br>
 <input type="submit" form="userDetails" value="Submit form" onclick="sayDetails();">
<input type="button" form="userDetails" id="resetBtn" value="Reset" />
<br>
<textarea style="width:600px;height:100px;" id="outputArea" disabled></textarea>
</div>

然而，在运行它之后，在 textarea 字段中它显示了这个:

Name: [object NodeList]<br/>Address: [object NodeList]<br/>City: [object NodeList]<br/>Email: [object NodeList]

And what I would want it to display is:

Name: name hereAddress: address hereCity: city hereEmail: email here

Where did I go wrong, and how can I make my code more efficient? Also, a little help to show me how to make the form input field lined up would be much appreciated!

EDIT: After a few correction here and there, and thanks to you guys I was able to do it correctly.

Here is the new and revised JS script that correctly displays the details the way I want it.

    function sayDetails() {

        var name = document.getElementById("uName").value;
        var address = document.getElementById("uAddress").value;
        var city = document.getElementById("uCity").value;
        var email = document.getElementById("uEmail").value;
        var final_txt = "Name: " + name + "\n" + "Adress:" + address +  "\n" + "City: " + city +  "\n" + "email:" + email;

        document.getElementById("outputArea").innerHTML = final_txt;


    }

Answer 1

document.getElementsByName 返回 NodeList (节点集合)

要获得第一个项目，你应该像这样使用:

 var name = document.getElementsByName("userName")[0],
    address = document.getElementsByName("userAddress")[0],
    city = document.getElementsByName("userCity")[0],
    email = document.getElementsByName("userEmail")[0]

然后对于每个Node你都可以获得值，例如:

name.value