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

我试图用一些输入字段创建一个表单，然后将这些输入字段放入textarea字段中

以下是我的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>

---

如果将

节点列表

对象打印为字符串，则将打印其

原语

值。这也难怪。试着像下面这样编写代码

final_txt = "Name: " + name[0].value + "Address: " + address[0].value + "City: " + city[0].value + "Email: " + email[0].value;

我看到有些ID分配了输入元素，最好用它来代替名称来选择元素，比如

var name = document.getElementById("uName").value;

---

document.getElementsByName

返回（节点集合）

要获取第一个项目，您应使用以下方法：

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

然后，对于每个

节点

可以获得值，例如：

name.value

---

使用

文档。getElementById

记住是唯一的

function sayDetails() {

var name = document.getElementById("uName").value,
address = document.getElementById("uAddress").value,
city = document.getElementById("uCity").value,
email = document.getElementById("uEmail").value,
final_txt = "Name: " + name + "Address: " + address + "City: " + city + "Email: " + email;

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

return false;

---

}

我明白了，这个概念对我来说是新概念，给了我一些东西可以阅读，谢谢！额外问题，我可以知道如何在元素名称、地址、城市和电子邮件之间添加换行符吗？快速问题，我如何在名称、地址、城市和电子邮件之间添加换行符？我的代码显示
，而不是给我换行符。

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

name.value

function sayDetails() {

var name = document.getElementById("uName").value,
address = document.getElementById("uAddress").value,
city = document.getElementById("uCity").value,
email = document.getElementById("uEmail").value,
final_txt = "Name: " + name + "Address: " + address + "City: " + city + "Email: " + email;

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

return false;