JQuery部分をJavaScriptで記述したい。

Question

現在、サイトの模写を終え、JQueryで実装している部分をJavaScriptで記述しております。

しかし、ハンバーガーのボタンをクリックしても、ナビゲーションが表示されません。

*JQueryでは、動作確認済みです。

何故なのでしょうか？

 <script src="js/jquery-3.4.1.min.js"></script>
 <script>
 //ここからハンバーガーメニューの実装
  $(document).ready(function(){
  $('#humberger').on('click', function(){
  $(' body, nav ').toggleClass('show');
  $(this).toggleClass('click');
   });
});
 </script>

//ここからハンバーガーメニューの実装
var humberger = document.getElementById("humberger");
var body = document.querySelector("body");
var nav = document.querySelector("nav");

humberger.addEventListener("click", function () {
  nav.classList.toggle("show");
  body.classList.toggle("show");
  humberger.classList.toggle("click");
});

追記
HTML,CSSは文字数制限対象になりますので、codesandboxのURLを貼ります。
以下に全てのファイルが閲覧出来るようになっております。
ソースコード

Comments

[m.ts10806]

html,cssもご提示ください。
JavaScriptだけ見て言えることは少ないです

[ah6BD2gZo5GnjnT]

ご指摘ありがとうございます。

[m.ts10806]

質問は編集できますので。

[Zuishin]

jQuery だとうまく動くかどうか確かめてみましたか？

Answer 1

修正箇所は二か所です。
まず 15 行目、

tab.addEventListener('click', (function(){

これを次のように書き換えましょう。

tab.addEventListener('click', function(){

次に、humberger を取得する時点でロードが終わっていないため、humberger の中身が null になっています。それを避けるため、確実にロードを待ちましょう。

window.addEventListener("load", () => {
    // この中に他のコードを入れる
});

以上でハンバーガーメニューが開くことを確認しました。全体のコードは次のようになります。

//ハンバーガーメニューの実装
window.addEventListener("load", () => {
  const humberger = document.getElementById("humberger");
  const body = document.querySelector("body");
  const nav = document.querySelector("nav");

  humberger.addEventListener("click", function () {
    nav.classList.toggle("show");
    body.classList.toggle("show");
    humberger.classList.toggle("click");
  });

  //タブ切り替え
  const tab = document.querySelector(".tab a");
  tab.addEventListener("click", function () {
    var tabContents = tab.attr("href");
    if (tabContents.classList.add("active")) {
      tabContents.siblings.classList.remove("active");
    }
    return false;
  });
});

Comments

[ah6BD2gZo5GnjnT]

素早く的確な回答を、ありがとうございます。タブボタンの切り替えの実装部分も、クリック出来ない理由が、ハンバーガーメニューのボタンと同じ理由かもしれないので、修正してみたいと思います。助かりました。

[Zuishin]

どうでしょうね。jQuery は jQuery で便利なところがあると思いますが、それを使わずでき、少しでも軽くしたいなら、使わないという事例も増えるとは思います。

[ah6BD2gZo5GnjnT]

Jsにトライしてみます。ありがとうございます????

[Zuishin]

解決しないということは、この回答で何か問題がありましたか？

[Zuishin]

古いコメントが編集されたので、私の返答が意味不明なものとなっています。また、この質問にはタブは関係ないので、新しく何かを始める前にこちらを解決してください。

Answer 2

ざっと見たところで、気になる点は二箇所あります。

• $(document).ready() と同等の機能がない
• document.querySelector("nav") が一つ目のnav要素しか参照しておらず、nav要素が複数存在する場合に対応できていない

※HTML,CSSも含めて、現象を再現可能なコードを出すと良いと思います。

• 再現可能な短いサンプルコードの書き方 - ヘルプ センター - スタック・オーバーフロー

Re: ah6BD2gZo5GnjnT さん

Comments

[ah6BD2gZo5GnjnT]

カギカッコの数が対応していないということも考えられますでしょうか？

[think49]

SyntaxErrorが発生しない事から、文法上の誤りはないと考えられます。

[think49]

> SyntaxErrorが発生しない事から、文法上の誤りはないと考えられます。

上記は質問文が一度も修正されていない状態のコードに指して、回答しています。
https://teratail.com/questions/history-questions/293729
追記されたソースコードでは、SyntaxErrorが発生します。
https://codesandbox.io/s/dental-clinic-moxiekoteingu-y432l?file=/main.js:0-602
質問文に書いたコードと元コードが異なる為、発見できませんでした。