使用相同的JavaScript重复HTML，如何优化？-CSDN博客

本文探讨了如何为页面上重复出现的HTML元素正确设置JavaScript事件监听器。作者遇到了只有第一个元素响应交互的问题，而其他相同ID的元素则无法触发事件。文中提供了解决方案并链接了相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我应该在同一页上重复多次相同的HTML代码段。我有一个外部JavaScript文件，只要用户与其中一个重复段进行交互，就会调用其功能。但是，只有三个代码段中的第一个会影响交互。当与另外两个人互动时，没有任何反应，也就是说，JavaScript不会被调用。使用相同的JavaScript重复HTML

我会假设，如果所有的HTML代码段都有相同的ID和类(除了应该分配唯一ID)，那么至少所有3个HTML段的内容会发生变化这些细分市场的其他任何实例。

下面是这个问题的例子：

var textbox = document.getElementById("my-id");

textbox.onkeyup = function() {

\t alert("ok");

}

在这里，只有我-ID的第一个实例交互创建警告框，其他2，不要。我怎样才能让我的代码适用于所有3个文本框？

的ID必须是唯一的，请参阅：[多个不同的HTML元素可以有相同的ID，如果他们是不同的元素？](HTTPS： //stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme)。除此之外'getElementById'只返回一个元素。看看[添加事件监听器到多个元素](https://stackoverflow.com/questions/13915702/adding-event-listeners-to-multiple-elements) –

[添加事件监听器到多个元素]( https://stackoverflow.com/questions/13915702/adding-event-listeners-to-multiple-elements) –