addEventListenerで追加したクラスのselectorを取得できない

Question

前提

addEventListenerで追加したクラスのselectorを取得できない

クリックしたらアンダーラインが横に移動するインタラクションの実装をする際に、
click後にactiveクラスの要素を取得できないです。

let currentItem = document.querySelector(".current-item");
let slideLine = document.querySelector("#slide-line");
let nav = document.querySelector("#navigation");
let list = document.querySelectorAll("ul li");

list.forEach((el) => {
  el.addEventListener("click", (e) => {
    list.forEach((item) => {
      item.classList.remove("current-item");
    });

    el.classList.add("current-item");
    console.log(currentItem);//要素が更新されない
    currentItemFunction();
  });
});

currentItemFunction();

function currentItemFunction() {
  let styles = {
    width: `${currentItem.clientWidth}`,
    left: `${currentItem.getBoundingClientRect().left}`
  };
  console.log(styles.width);
  slideLine.style.setProperty("width", `${styles.width}px`);
  slideLine.style.setProperty("left", `${styles.left}px`);
}

<nav id="navigation">
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li class="current-item">
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">Company Profile</a>
    </li>
    <li>
      <a href="#">Contact Us</a>
    </li>
  </ul>
  <span id="slide-line"></span>
</nav>

実現したいこと

console.log(currentItem);部分でクリックした要素が取得したいです。

回答よろしくお願いします。

Answer 1

querySelector() と querySelectorAll() の結果は、それらを呼び出した時点でのマッチ結果を返します。DOMの状態が変わったとしても自動で更新されたりはしません。よって、querySelector() を呼び直してください。

    el.classList.add("current-item");
    currentItem = document.querySelector(".current-item");
    console.log(currentItem);//要素が更新される

document.getElementsByClassName() だと自動的に更新されます。

Comments

[yunosuke]

`document.getElementsByClassName()`
だと自動的に更新されるんですね。
ありがとうございます。
querySelector()で呼びなおすことで無事に解決できました。
ありがとうございます。

Answer 2

let currentItem = document.querySelector(".current-item");としておいても、実行した瞬間の結果を保存しているだけで、あとからクラスを書き換えてもcurrentItemには何も影響しません。

せっかくelで値を持っているわけですし、currentItem = el:で再代入してしまうのが手っ取り早いです。

Comments

[yunosuke]

再代入が必要だったんですね。
的確な回答ありがとうございます。
無事に実装できました！