Scroller - multiple on same page - discrepancies

Store Design
, ,

Topic summary

Issue: Multiple scrollers placed on the same page; only one worked when both code blocks were included (tested in the same CodePen workspace). Each scroller had different IDs/classes, with one reversed and one regular.

Root cause: Both scripts declared the same variable name (reverse) using const with document.getElementById(…). const is not redeclarable, so the second declaration caused a conflict, preventing the second scroller from functioning.

Clarification: Using the same variable name across separate script blocks on a single page shares the same scope context, leading to naming collisions. const cannot be reassigned or redeclared; var would allow redeclaration but is not ideal for clarity.

Fixes proposed:

  • Use unique variable names for each scroller’s script (best practice).
  • Alternatively, change const usage/structure, but unique names and IDs are preferred to avoid collisions.

Outcome: The author changed the variable name after const (i.e., used distinct variable names) and confirmed both scrollers now work.

Status: Resolved.

Summarized with AI on January 2. AI used: gpt-5.
4

Hi @xnyjyh you can try this code. The variable reverse is already used in the first javascript code, so you can not use the same variable in the second code. Because on one page it will read as the same variable. So you have to use the different variables.


  REMEMBERING OUR SISTERS  
![mmiw_icon_58dfa734-74ca-4836-9e51-1e61f9cf3cc0.png?v=1711062378|396x396](upload://lsHXazdq5BOVnTKLCShH1DWJVZm.png)

  BUY NOW, PAY LATER  
![white_sun.svg?v=1710724460|500x500](upload://hj6L7zVTGv3IfOlKhn0itQYCTtS.svg)
1 Like