JavaScriptでtoggleが動きません

Question

前提・実現したいこと

ハンバーガーメニューの三本線にtoggleを用いてクラスを付け外ししたい。

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

classList.addにするとクラスが付与されますが、classList.toggleにすると動きません。
よろしくお願い致します。

該当のソースコード

document.addEventListener('DOMContentLoaded', function() {
const btn = document.querySelector('.ham-btn');
const line1 = document.querySelector('.line1');
const line2 = document.querySelector('.line2');
const line3 = document.querySelector('.line3');

const navActive = function() {
  line1.classList.toggle('line1-active');
  line2.classList.toggle('line2-active');
  line3.classList.toggle('line3-active');
};

btn.addEventListener('click', navActive);

});

試したこと

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

VS Code
Chrome

Comments

[kei344]

https://jsfiddle.net/1zaem4b9/ 特に問題なく動いているようなので、HTML側に問題があるのではないでしょうか。
（質問文は編集できます）HTMLも質問文に追記してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[takubu]

ご返信ありがとうございます。
htmlを追記するため、今回の質問に関わる範囲のソースをまとめていたところ、動かない原因が分かりました。headとbodyの二ヵ所でjsファイルを宣言していました。お時間を取らせてしまい、申し訳ありませんでした。ありがとうございます。

Answer 1

headとbodyでjsファイルを2度宣言していた。