Javascript 多动态输出

我需要使用div元素显示输入到多个文本字段中的数据。每个文本输入应有一个专用的div

我环顾四周，发现了如何创建动态输入。但它们都没有解释如何使用创建的字段来读取信息和显示信息

我已经更新了代码以输出两个单独的文本字段，但是让它一起显示是不起作用的

函数显示\u数组（）
{
var数组=document.getElementsByClassName（'tb'）；
var e=“
”；
var array2=document.getElementsByClassName（'tb2'）；
var e2=“
”；
对于（变量y=0；y

我已经更正了这一行中的代码“e+=array[y].value”“++”“e2+=array2[y].value；”，这应该可以用于添加和显示功能

函数显示\u数组（）
{
var数组=document.getElementsByClassName（'tb'）；
var e=“
”；
var array2=document.getElementsByClassName（'tb2'）；
var e2=“
”；
对于（变量y=0；y

主要问题是：

e += array[y].value ''+'' e2 += array2[y].value;

这不是有效的赋值语句，也是语法错误的来源

但是，在我们讨论它应该是什么之前，您的代码需要进行大量清理。您的代码遵循古老的做法，不应再使用。例如，不要使用带有

href=javascript:void（）的超链接

因为您需要一些东西供用户点击。超链接用于导航，如果您不进行导航，只需使用按钮或任何其他元素即可，因为几乎所有内容都支持

点击事件

另一个需要改变的大问题是设置事件处理程序的方式。您使用的技术已有20多年的历史。不要使用内联HTML事件属性（
onclick
，
onchange
，等等）正如所说，它们可能会导致代码出现问题。相反，请使用注册事件处理程序

接下来，使用创建新元素作为节点对象，而不是通过将变量连接到字符串来创建新元素，这使得配置新元素更加简单，并且不需要连接

当然，您可以使用counting
for
循环遍历元素集合，但更现代、更易于使用的方法可以用于节点集合（在大多数浏览器中，但不是所有浏览器中）和数组集合（在所有现代浏览器中）。
.forEach（）有什么好处
是指它将枚举所有数组元素，而无需设置和管理循环计数器。这使代码更加简单，并避免了循环计数器的许多常见错误

元素没有结束标记（
）（即与
相反的
）。这是一种过时的语法，对您毫无帮助

注意下面的代码对HTML和JavaScript的清理程度


//加载DOM后，只需一次即可获取函数所需的所有DOM引用
var add=document.getElementById（“add”）；
var remove=document.getElementById（“remove”）；
var result=document.getElementById（“结果”）；
var btn=document.getElementById（“btnDisplay”）；
var content=document.getElementById（'content'）；
var textboxs=document.getElementsByClassName（“tb”）；
//设置事件处理程序：
add.addEventListener（“单击”，addElement）；
remove.addEventListener（“单击”，removeElement）；
btn.addEventListener（“单击”，显示数组）；
函数显示_数组（）{
var resultString=“”；//最终生成的字符串将存储在此处
//将所有文本框放入一个数组中，以便可以安全地使用.forEach（）
Array.prototype.slice.call（文本框）.forEach（函数（tb）{
resultString+=“
”+tb.value；//只需获取

});
result.innerHTML=resultString；//使用结果更新元素
}
var textBoxNum=0；//用于跟踪id分配的文本框数量的计数器
函数addElement（）{
//创建和配置
var objNewDiv=document.createElement（'div'）；
objNewDiv.id='div_u'+++textBoxNum；
objNewDiv.classList.add（“行”）；
//创建和配置
var lbl1=document.createElement（“标签”）
lbl1.textContent=“Textbox”+textBoxNum；
lbl1.for=“tb”+textBoxNum；
//创建和配置
var tb1=document.createElement（“输入”）；
tb1.type=“文本”；
tb1.id=“tb”+textBoxNum；
tb1.类列表。添加（“tb”）；
tb1.name=tb1.id；
//将标签和文本框放入div
objNewDiv.附肢儿童（lbl1）；
objNewDiv.appendChild（tb1）；
//将div放入文档中
content.appendChild（objNewDiv）；
}
函数removeElement（）{
}
/*这些都不是必需的，但它使跨距看起来像按钮
并为最终结果添加间距*/
span.按钮{
显示：内联块；
边框：1px纯色灰色；
填充：4px；
宽度：5em；
背景色：#E0；
文本对齐：居中；
光标：指针；
用户选择：无；
}
标签{
显示：内联块；
右侧填充：1em；
}
分区行{
边缘底部：.5em；
}
使用简单JavaScript动态添加和删除文本框的演示


添加
去除

您应该首先更正语法错误。从您显示的代码中可以看出，array和array2未定义，显示的类中没有类名为“tb”或“tb2”的类，因此您没有正确使用数组分配。另请参阅。要注意这些方法getElementby（）返回与数组不同的集合。要创建数组，必须使用spread运算符[…nowyougetanarray]并且可以执行数组operations@MatthewLagerwey对您的评论进行了几处更正。正在将类

tb

分配给动态创建的文本框。集合在远程与数组相同（不完全相同，但肯定是“类似数组”）。以及