Javascript 调用在文本区域中显示多个值

我正在尝试使用HTML和JavaScript创建一个简单的输入表单网页，但我被卡住了。我试图做的是询问以下内容并将其显示在文本区域中：

-First Name
-Last Name
-CRN
-Professor Name

到目前为止，我只能得到结果框上显示的第一个名字，但另一个没有运气。可能需要一些帮助，提前谢谢

我的代码如下所示：

//初始化计数器和数组
var numbernames=0；
变量名称=新数组（）；
函数SortNames（）{
//从文本字段中获取名称
thename=document.theform[“firstn”].value
//将名称添加到数组中
名称[数字名称]=名称；
//递增计数器
numbernames++；
document.theform.sorted.value=names.join（“\n”）；
}

名字：

姓氏：

CRN：

教授:
结果：

这里有一个完全不同但更具可读性的方法

我得到所有的

输入

类型的文本

我得到了目标的

textarea

循环通过所有输入获取其值

在循环内部，获取值后，将其设置为

textarea

看看下面的代码片段

//初始化计数器和数组
函数SortNames（）{
var inputs=document.querySelectorAll（'input[type=“text”]”）；
var txtArea=document.querySelector（'[name=“sorted”]'）；
//循环文本输入
输入。forEach（功能（elem）{
var valueOf=元素值；
txtArea.value+=valueOf+'\n'；//计算值
});
}

名字：

姓氏：

CRN：

教授:
结果：

将标签更改为“更多”。用于设置/获取。输出是一个简单的过程

演示中评论的详细信息

演示

//引用顶部表单
const reg=document.forms.registration；
//参考底部表格
const dis=document.forms.display；
//从top form收集所有输入
常数f=规则元素；
//单击顶部窗体时。。。
reg.onclick=函数（事件）{
//从每个输入中收集数据并将其存储在对象中
常数学生={
第一：f.First.value，
Last:f.Last.value，
CRN:f.CRN.value，
教授：f.value教授
};
//调用函数
显示数据（事件、学生）；
}
函数显示数据（事件、学生）{
//参考文本区域
const view=dis.elements.sorted；
//如果单击的元素具有[name=add]。。。
如果（event.target.name==='add'）{
/*使用以下命令将textarea的值设置为模板文字
||来自学生对象的插值。
*/
view.value+=`
第一：${student.First}
最后。${student.Last}
CRN..:${student.CRN}
教授：${学生，教授}
~~~~~~~~~~~~~~~~~~~`;
//否则退出
}否则{
返回false；
}
}

输入，
标签{
字体：继承；
显示：内联块；
}
标签{
宽度：20%
}
[类型=文本]{
宽度：75%；
}
[类型=重置]{
利润率：5px085%；
}

登记处
名字：


姓氏：


CRN：


教授:


查看数据

好吧，你的JS得到的是表单[“firstn”]的

值，但没有得到其他字段，所以？在设置textarea值之前，您真的需要将值存储在数组中吗？Stephen，我知道它得到的是firstn值，我如何确保它得到其他值（姓氏，crn，professor）？这很有效！但是，因为我是一个完全的初学者。您是否介意解释一下，如何在不更改我提供的大部分原始代码的情况下，让其他值（姓氏、crn、professor）显示在结果框中。谢谢好的，我几分钟后编辑。但是你在哪里做的方式更糟糕，不推荐。。。我建议以我第一次展示的方式学习更多@AaronAguilar（已编辑）