スクロールしたらテキストに下線がアニメーションで引かれるページで、下線の3つ目以降が動作しない

Question

前提

Wordpress内のページで、「スクロールしたらテキストに下線がアニメーションで引かれるページ」を作りたく、ネットで探したCSSとJSを組み込みました。
こちらを参考にしました。
https://yusukecode.com/scroll-line/
下線2つまではうまく動作するのですが、3つ目以降がなぜか動作しません。
HTMLの指定を書き間違えているのかと思いましたが、試しに1つ目を消してみると、何も変更していない3つ目が動作するので、やっぱり2つまでしか効かない…と思っています。
解決方法があれば教えて頂きたいです。

実現したいこと

スクロールしたら下線がアニメーションで引かれるのを、3つ以上動作させたい。

発生している問題・エラーメッセージ

2つ目までは動作するが、3つ以降が動作しない。

該当のソースコード

JavaScript

<script> let expantion = document.getElementsByClassName('underline-before'); let expantionswitch = ["off","off"]; window.onscroll = function(){ for(let i = 0,len = expantion.length;i < len;i++){ let ex_clientRect = expantion[i].getBoundingClientRect(); let wh = window.innerHeight; if(wh > ex_clientRect.top + 200 && expantionswitch[i] === "off") { expantion[i].classList.add('underline-after'); expantionswitch[i] = "on"; } } } </script>

CSS

<style> .underline-Area { width: 50%; min-width: 200px; height: auto; margin: 0; padding: 20px; border: 1px solid #333; } .underline-Area p { margin: 60px auto; } .underline-before { background: linear-gradient(black, black) 0 100%/0 2px no-repeat; transition: background 3s; text-decoration: none; } .underline-after { background-size: 100% 2px; } </style>

HTML

<div class="underline-Area"> <p>この行に近づくと……<span class="underline-before">ほらここにアンダーラインが引かれます。</span>.underline-beforeというセレクタにtransitionが設定されているので、アニメーションになります。</p> <p>せっかくなのでもう一度<span class="underline-before">ここにもアンダーラインが引かれます。</span></p> <p>せっかくなのでもう一度<span class="underline-before">この箇所以降アンダーラインが引かれません</span></p> </div>

試したこと

正常に動作している箇所をコピペしてみたが、3つ目以降が動かない。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

expantionswitchでon,offの状態を管理していますがexpantionswitchの中身が2個しかないので
上の2個分の要素しか状態を管理できていません。"off"を追加しましょう。

ただ要素を増やしていくつもりならこの方法だと要素を増やすたびに配列の中身を増やさなくてはいけないので別の方法をとったほうがいいと思います。

Comments

[jb-]

その個所のoffを増やしたら思い通りの動作になりました。
やはりコピペではなくちゃんと理解してJSを組み込まないといけないなと痛感しております…。
今回はこちらで、また別の方法も別の機会で調べたり勉強したいと思います。
大変助かりました、ありがとうございました！