Javascript 如何使js生成的元素与静态html元素正确交互？

我是学生

我举了一个例子

在这个测试用例中，正如您在上面右侧的代码中所看到的，我有6个硬编码的html输入，3个用于名字，3个用于姓氏。 在左侧，我有一个名为“添加”的

，每次单击此按钮（最多3次单击）时，

函数addInputs（）

会在

中生成一个

元素

这个生成的

元素包含两个html输入，一个用于名字，一个用于姓氏，每个生成的输入使用一个计数器变量（

var-inputscenter=0；

）获取一个唯一的id

我们的目标是通过使用

函数changeValues（）

动态复制生成的输入中键入的任何内容-左侧-硬编码的输入-右侧-，从名字到名字，从姓氏到姓氏，所有这些都与生成的输入的每个键一起运行

我的问题是，

函数changeValues（）

运行良好，但只有在我生成左侧所有3个元素（如图中所示）后，才可以运行，但不能仅使用其中一个或2个（类似）

---

我缺少什么？

当您试图获取尚未创建的元素的值时，函数会抛出一个错误。也就是说，在

changeValue

函数中，当

FnameX

未定义时（因为它在DOM中找不到元素），尝试获取

value

属性。在未定义的元素上添加单击处理程序也是如此

您可以通过在尝试获取其值之前检查是否定义了

Fname1

etc来修复此问题

更好的方法是将迄今为止生成的元素存储在数组中。然后在这些元素上循环并传递其值

您可以存储一个ID数组，在不需要经常访问元素时，可以使用该数组查找元素。在这种情况下，我将存储对象本身

---

另外，您不必每次添加元素时都在每个元素上添加单击处理程序。

我明白了。感谢您的帮助，我并不要求提供免费代码或任何东西，但您能否提供一个示例，说明如何将附加的元素存储到数组中？