当我尝试打印到文本区域字段中时，数据被[对象节点列表]替换

Data replaced by [object NodeList] when I try to print out into textarea field

本文关键字：数据 对象 节点 替换 列表 打印 字段 区域 文本      更新时间：2023-09-26

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

这是我的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>

但是，运行它后，在文本区域中，它显示以下内容：

名称： [对象节点列表]
地址： [对象节点列表]
城市： [对象节点列表]

电子邮件： [对象节点列表]

我希望它显示的是：

名称
：此处名称地址：地址在这里城市：城市在这里电子邮件：在此处发送电子邮件

我哪里出错了，如何提高代码效率？另外，向我展示如何使表单输入字段对齐的一点帮助将不胜感激！

编辑：在这里和那里进行了一些更正后，多亏了你们，我才能正确地做到这一点。

这是新的和修订的JS脚本，它以我想要的方式正确显示详细信息。

    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;

    }

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
好吧，

如果您将node list对象打印为字符串，则将打印其primitive值。难怪。尝试像下面这样编写代码，

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.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;

}

相关文章：