ハンバーガーメニューが動かない Cannot read properties of null

こんにちは。

気づけば今年も残すところあと1ヶ月ですね。

光陰矢の如し。まさにそんな気分です。

ハンバーガーメニューが動かない

さて、先日コーディングをしていてハンバーガーメニューがなぜか動かないという現象が起きました。

よくスマホサイトで見かける「三」こんなボタンです。
本来ならこれをタップするとメニューが展開される仕組みです。

該当の記述は下記の通りです。

  //hamburger menu
  function hamburger() {
    document.getElementById('line1').classList.toggle('active');
    document.getElementById('line2').classList.toggle('active');
    document.getElementById('line3').classList.toggle('active');
    document.getElementById('hamburger-menu').classList.toggle('active');
  }
  document.getElementById('hamburger').addEventListener('click' , function () {
    hamburger();
  } );

記述ミスがないかどうか何度も確かめましたが何故か動かない。。

エラー内容

デベロッパーツールでコンソールを見てみるとこんなエラーが出てました。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

【原因】存在しない要素に対して addEventListener を使用したことでエラーが発生

エラー内容を調べてみると、特定のページで「id=”hamburger”」の要素が存在しないため、存在しない要素に対して addEventListener を使用したことでエラーが発生してしまったようです。

今回、特定のページでハンバーガーメニューを使わないページがあったのでどうやらそれが原因だったようです。

【対策】条件分岐で「id=”hamburger”」がある時だけ addEventListener を実行する

js ファイルを下記のように書き換えます。

  //hamburger menu
  function hamburger() {
    document.getElementById('line1').classList.toggle('active');
    document.getElementById('line2').classList.toggle('active');
    document.getElementById('line3').classList.toggle('active');
    document.getElementById('hamburger-menu').classList.toggle('active');
  }
  document.getElementById('hamburger').addEventListener('click' , function () {
    hamburger();
  } );

書き換える　↓

//hamburger menu
function hamburger() {
  document.getElementById('line1').classList.toggle('active');
  document.getElementById('line2').classList.toggle('active');
  document.getElementById('line3').classList.toggle('active');
  document.getElementById('hamburger-menu').classList.toggle('active');
}
const hamburgerbtn = document.getElementById('hamburger');
if (hamburgerbtn) {
  hamburgerbtn.addEventListener('click' , function () {
    hamburger();
  });

まとめ

よく使うコードはコピーして使ってしまうので、「動いて当然」という考えがありますが、条件が変わった時に時々いつも使用しているコードでもエラーになったりします。

また一つ勉強になりました。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。