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

Question

Js学生在这里。

我做了一个例子CODEPEN。

在这个测试用例中，正如您在右侧上面的代码中看到的那样，我有 6 个硬编码的 html 输入，3 个用于名字，3 个用于姓氏。在左侧，我有一个<button>称为ADD的按钮，每次单击此按钮（最多单击 3 次）都会在内部function addInputs()生成一个<li>元素<ol id="originContainer"></ol>。

这个生成的<li>元素包含 2 个 html 输入，一个用于名字，一个用于姓氏，每个生成的输入都使用计数器变量 ( var inputscounter=0;) 获得一个唯一的 id。

目标是动态复制，无论我在生成的输入中输入什么 - 到左边 - 到硬编码的输入 - 到右边 - 名字到名字，姓氏到姓氏，所有这些都通过function changeValues()使用生成的输入的keyup。

我的问题是，function changeValues()工作正常，但只有在我生成左侧的所有 3 个元素（如在这张图片中可视化）之后，但不是只有其中一个或 2 个（如THIS）

我错过了什么？

标签： javascripthtmlcss

Answer 1

当您尝试获取尚未创建的元素的值时，该函数会引发错误。也就是说，在changeValue您尝试获取value属性的函数FnameX中undefined（因为它无法在 DOM 中找到该元素）。在未定义的元素上添加点击处理程序也是如此。

Fname1您可以通过在尝试获取它们的值之前检查是否定义了 etc 来解决这个问题。

一种更好的方法是将迄今为止生成的元素存储在一个数组中。然后遍历这些元素并传输其值。

您可以存储一个 id 数组，当您不需要经常访问它们时，您可以使用它们来查找元素。在这种情况下，我将自己存储对象。

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