0

前提

現在JSのバニラ版のみでハンバーガーメニューを作成しています。

解決したい問題・エラー内容

現在このようなエラーが出てしまっていて動きません。
改善して3つ同時に動くような設定にしたいです。

Cannot read properties of undefined (reading 'toggle')

考察・試行した事

・最初は線全てにIDをつけて付け替えをしようかと思ったのですが、綺麗なコードではないと思いやめました。
const lines = document.querySelector(".line"); にすると一本だけ線が動くのですが、他のものの反応(クラスの付け替え等もなかったので、違うやり方を探した方がいいのではと思っています。)
linesの指定を querySelectorAll にしてみたりしたのですが今度は全てにエラーが出て動かなくなりました。

コード

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="CSS/style.css">
  <title>Document</title>
</head>
<body>
  <header>
    <nav id="list">
      <ul>
        <li><a href="">リスト1</a></li>
        <li><a href="">リスト2</a></li>
        <li><a href="">リスト3</a></li>
        <li><a href="">リスト4</a></li>
      </ul>
    </nav>
    <div class="ham" id="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
  </header>
  <main>
    
  </main>
  <footer>
    <script src="js/style.js"></script>
  </footer>
</body>
</html> 

SCSS

  background-color: blue;
  width: 100%;
  height: 100px;

}
.ham{
  width: 50px;
  height: 50px;
  z-index: 100;
  position: fixed;
  top: 25px;
  right: 25px;
  background-color: white;
  cursor: pointer;
  span{
    display: inline-block;
    justify-content: center;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 10px;
    top: 30px;
    margin: 0 auto;
    height: 3px;
    border-radius: 2px;
    background: red;
    width: 60%;
    &:nth-child(1){
      top: 14px;
      &.active{
        top: 23px;
        transform: rotate(45deg);
      }
    }
    &:nth-child(2){
      top: 24px;
      &.active{
        display: none;
      }
    }
    &:nth-child(3){
      top: 34px;
      &.active{
        transform: rotate(-45deg);
      }
    }
  }
} 

JS

const hamBtn = document.querySelector("#hamburger");
const lines = document.querySelectorAll("line");

hamBtn.addEventListener('click', () => {
  
  lines.classList.toggle('active');
});

1 件の回答 1

0

やりたいことは「id="hamburger"の要素がクリックされたら class="line"のすべての要素の active クラスを切り替える」でよいでしょうか?

  • querySelector() は条件に合う最初の要素だけを返すのでこのケースでは使えません。
  • querySelectorAll() の返り値は配列のようなものなので、すべてを処理するにはループなどが必要です。
for (let line of hamBtn.querySelectorAll(".line")) {
  line.classList.toggle('active');
}
1
  • ありがとうございます。 ご指摘の動きで間違いないです。 querySelector()は最初の要素にしか適応されないのですね。 querySelectorAll() もご指摘いただいてありがとうございます。 無事動きました。 勉強させて頂きました。 Commented 2023年9月20日 6:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。