JavaScript对一个id有效，但对另一个id无效？

我有一个JavaScript文件，当用户向下滚动页面时，它基本上会画一条线。它为第一个SVG画了一条线，但不为另一个（使用相同类）画了一条线。例如，我在

text repeater.php和
text block.php中都有以下代码块：

<svg height="100" width="200">
   <line class="line__svg" id="line" x1="0" y1="0" x2="0" y2="200"  />
</svg>

该行在
text block.php
中绘制，但不在
text repeater.php

为什么

还有一个相关的消息。我怎样才能让线画得更长？目前它非常微妙。
IDs就是这样工作的。您只能有一个Id实例（有一些技巧，但您不想这样做）

而是使用类

<tagName class="line">

因此，您的文档有以下代码的多个实例：
因为我们没有这些不同php文件的上下文，无论它们是单独执行的，还是一个包含在另一个文件中以形成一个页面，无论您在执行代码时/如何执行代码，其中是否包含相关的JS和HTML代码，无论您是否看到任何控制台错误等，都很难提供帮助。您上面的代码可以作为摘要，但不允许我们实际重现您的问题。如果您的意思是在同一最终HTML文档中包含两次相同的ID，则不会，因为您不能有重复的ID。ID必须唯一标识一个元素…否则根据定义它不再是ID！代码将只选择它找到的具有该ID的第一个元素。所有其他元素都被视为无效。如果您希望代码能够针对多个元素，则必须重新设计代码以使用类而不是ID（然后元素可以共享一个公共类），或者将要操作的特定元素的ID传递给函数。
<tagName class="line">

// Selecting all lines
const scrollLineCollection = document.querySelectorAll(".line");

for ( const scrollLine of scrollLineCollection ) {
  // do something with scrollLine
}