JavaScript works for one id but not another?

Question

I have a JavaScript file which essentially draws a line when the user scrolls down the page. It draws a line for the first SVG but not for the other (which uses the same class). For example, I have the following code block in both text-repeater.php and text-block.php :

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

And here is my parallax.js file:

var scrollLine = document.getElementById("line");
var length = scrollLine.getTotalLength();

// Start position of  drawing
scrollLine.style.strokeDasharray = length;

// Find scroll percentage on scroll
window.addEventListener("scroll", myFunction);

function myFunction() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse drawing (when scrolling upwards)
    scrollLine.style.strokeDashoffset = length - draw;
}

The line draws in text-block.php but not in text-repeater.php

Ideas why?

Also, on a related note. How can I get the line to draw longer? It's very subtle at the moment.

Answer 1

That's how IDs work. You only can have one instance of an Id (kind of - there are tricks but you don't want to do that).

Instead use classes...

<tagName class="line">

...and loop over it:

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

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