ハンバーガーメニューのボタンの設定


### 前提

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

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

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

[code]

    Cannot read properties of undefined (reading 'toggle')
    
[/code]

### 考察・試行した事

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

### コード

html

[code]

    <!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="">リスト１</a></li>
            <li><a href="">リスト２</a></li>
            <li><a href="">リスト３</a></li>
            <li><a href="">リスト４</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> 
    
[/code]

SCSS

[code]

      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);
          }
        }
      }
    } 
    
[/code]

JS

[code]

    const hamBtn = document.querySelector("#hamburger");
    const lines = document.querySelectorAll("line");
    
    hamBtn.addEventListener('click', () => {
      
      lines.classList.toggle('active');
    });
    
[/code]




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

  * `querySelector()` は条件に合う最初の要素だけを返すのでこのケースでは使えません。
  * `querySelectorAll()` の返り値は配列のようなものなので、すべてを処理するにはループなどが必要です。

[code]

    for (let line of hamBtn.querySelectorAll(".line")) {
      line.classList.toggle('active');
    }
    
[/code]

