Q&A
正常に機能しないのであれば開発者コンソール等でエラーを確認してください
現在ハンバーガーメニューを実装したいのですが、その前段階としてあくまでテストとしてJavaScriptが機能しているかを調べるために
id=hamburger_menuの要素をクリックした際に.testのプロパティにあるdisplay=noneを付与させようとしたのですが、実際にクリックしても動かず、JavaScriptが正常に機能していないです。
正直何が原因なのかもわかっておらず、仮説も立てられない状況なのですが、これは一体何が原因で機能していないのでしょうか？
また、JavaScriptがそもそも読み込まれているかどうかを確認する術があればご教授いただきたいです。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="screen.css"> 7 <link rel="stylesheet" href="tablet.css" media="screen and (max-width: 1200px)"> 8 <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)"> 9 <link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet"> 10 <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet"> 11 <title>Document</title> 12</head> 13<body> 14 <header class="header"> 15 <nav class="nav"> 16 <button class="nav__hamburger-btn" id="hamburger-btn"> 17 <div class="hamburger-btn-arrows"></div> 18 <div class="hamburger-btn-arrows"></div> 19 <div class="hamburger-btn-arrows"></div> 20 </button> 21 <div class="inner"> 22 <div class="logo"> 23 <span class="logo--left"> 暮らしの体験宿</span> 24 <span class="logo--right">いろは</span><br> 25 <span class="logo--lower">-Yakushima Lodge & food Atelier-</span> 26 </div> 27 <ul class="nav__ul nav__ul--default" id="ul"> 28 <a href="#" class="nav__ul--ankwer"> 29 <li class="nav__li nav__li--1"> 30 -いろはのこと- 31 </li> 32 </a> 33 <a href="#" class="nav__ul--ankwer"> 34 <li class="nav__li nav__li--2"> 35 -宿泊ロッジ- 36 </li> 37 </a> 38 <a href="#" class="nav__ul--ankwer"> 39 <li class="nav__li nav__li--3"> 40 -食工房/ラウンジ- 41 </li> 42 </a> 43 <a href="#" class="nav__ul--ankwer"> 44 <li class="nav__li nav__li--4"> 45 -体験プログラム- 46 </li> 47 </a> 48 <a href="#" class="nav__ul--ankwer"> 49 <li class="nav__li nav__li--5"> 50 -ご予約- 51 </li> 52 </a> 53 </ul> 54 </div> 55 </nav> 56 </header> 57 <main class="main"> 58 <div class="hamburger-menu" id="hamburger_menu"> 59 <div class="logo"> 60 <span class="logo--left"> 暮らしの体験宿</span> 61 <span class="logo--right">いろは</span><br> 62 <span class="logo--lower">-Yakushima Lodge & food Atelier-</span> 63 </div> 64 <a href="#"> 65 <div class="nav__hamburger-btn" id="hamburger_btn"> 66 <div class="hamburger-btn__cross">×</div> 67 </div> 68 </a> 69 <ul class="nav__ul nav__ul--hamburger"> 70 <a href="#" class="nav__ul--ankwer"> 71 <li class="nav__li nav__li--1"> 72 -いろはのこと- 73 </li> 74 </a> 75 <a href="#" class="nav__ul--ankwer"> 76 <li class="nav__li nav__li--2"> 77 -宿泊ロッジ- 78 </li> 79 </a> 80 <a href="#" class="nav__ul--ankwer"> 81 <li class="nav__li nav__li--3"> 82 -食工房/ラウンジ- 83 </li> 84 </a> 85 <a href="#" class="nav__ul--ankwer"> 86 <li class="nav__li nav__li--4"> 87 -体験プログラム- 88 </li> 89 </a> 90 <a href="#" class="nav__ul--ankwer"> 91 <li class="nav__li nav__li--5"> 92 -ご予約- 93 </li> 94 </a> 95 </ul> 96 <a href="#"> 97 <img src="画像/facebook.png" alt="" class="hamburger-menu__facebook"> 98 </a> 99 <a href="#"> 100 <img src="画像/instagram.png" alt="" class="hamburger-menu__instagram"> 101 </a> 102 </div> 103 <div class="background-image"> 104 <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo"> 105 </div> 106 <div class="background-image--mobile"> 107 <a href="#"> 108 <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo"> 109 </a> 110 </div> 111 </main> 112 <script href="kadai.js"></script> 113</body> 114</html>
css
1*{ 2 margin: 0px; 3 padding: 0px; 4} 5html{ 6 font-size: 62.5%; 7} 8.inner{ 9 max-width: 100%; 10 width: 1920px; 11 height: 137px; 12 margin: 0 auto; 13} 14.flex-wrapper{ 15 display: flex; 16} 17.logo{ 18 color: white; 19 font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold; 20 position: relative; 21 height: 0px; 22 left: 6rem; 23 letter-spacing: 0.3rem; 24} 25.logo--left{ 26 font-size: 2.3rem; 27 margin-right: 9px; 28} 29.logo--right{ 30 font-size: 4rem; 31} 32.logo--lower{ 33 font-size: 1.5rem; 34 letter-spacing: 0.25rem; 35} 36.header{ 37 height: 100px; 38 width: 100%; 39 background-color: rgba(0, 0, 0, 0.644); 40 z-index: 100; 41 position: fixed; 42 /* display: none; */ 43} 44.nav__hamburger-btn{ 45 display: none; 46} 47.nav__ul{ 48 color: white; 49 list-style: none; 50 margin-top: 20px; 51 display: flex; 52 justify-content: flex-end; 53 align-items: center; 54} 55.nav__ul--ankwer{ 56 color: white; 57 text-decoration: none; 58} 59.nav__li{ 60 font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold; 61 font-size: 1rem; 62 text-align: center; 63 letter-spacing: 0.1rem; 64 word-wrap: break-word; 65 margin-right: 60px; 66} 67.nav__li--1:before{ 68 content: 'About iroha\A'; 69 white-space: pre; 70 font-size: 15px; 71} 72.nav__li--2:before{ 73 content: 'Lodge\A'; 74 white-space: pre; 75 font-size: 15px; 76} 77.nav__li--3:before{ 78 content: 'Food Atelier\A& Lounge\A'; 79 white-space: pre; 80 font-size: 15px; 81} 82.nav__li--4:before{ 83 content: 'Interactive\A program\A'; 84 white-space: pre; 85 font-size: 15px; 86} 87.nav__li--5:before{ 88 content: 'Booking\A'; 89 white-space: pre; 90 font-size: 15px; 91} 92.background-image{ 93 height: 100vh; 94 width: 100vw; 95 background-image: url(画像/アセット-1.png); 96 background-size: cover; 97 background-position: center; 98} 99.background-image__white-logo{ 100 position: absolute; 101 top: 0; 102 left: 0; 103 right: 0; 104 bottom: 0; 105 margin: auto; 106 height: 300px; 107} 108.hamburger-menu{ 109 display: none; 110} 111.background-image--mobile{ 112 display: none; 113} 114.test{ 115 display: none; 116}
tabletcss
1html{ 2 font-size: 62.5%; 3} 4.header{ 5 height: 54px; 6 width: 100%; 7 background-color: rgba(0, 0, 0, 0.644); 8 z-index: 100; 9 position: fixed; 10 /* display: none; */ 11} 12.hamburger-menu{ 13 background-color: rgba(0, 0, 0, 0.644); 14 height: 100vh; 15 width: 100vw; 16 padding: 1px; 17 margin: 0px; 18 box-sizing: border-box; 19 display: block; 20 overflow: hidden; 21 position: absolute; 22 z-index: 100; 23 top: -100vh; 24} 25.hamburger-menu{ 26 top: 0vh; 27} 28.hamburger-menu__facebook{ 29 position: absolute; 30 bottom: 31px; 31 right: 111px; 32} 33.hamburger-menu__instagram{ 34 position: absolute; 35 bottom: 31px; 36 right: 43px; 37} 38.nav__ul{ 39 display: block; 40 margin: auto; 41 margin-top: 73px; 42} 43.nav__li{ 44 margin-bottom: 27px; 45 margin-right: 0px; 46} 47.nav__ul--default{ 48 display: none; 49} 50.logo{ 51 color: white; 52 font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold; 53 position: relative; 54 height: 0px; 55 left: 4rem; 56 letter-spacing: 0.3rem; 57} 58.logo--left{ 59 font-size: 15px; 60 margin-right: 9px; 61 margin-left: 5px; 62} 63.logo--right{ 64 font-size: 25px; 65} 66.logo--lower{ 67 font-size: 0.25px; 68 letter-spacing: 0.2rem; 69} 70.nav__hamburger-btn{ 71 display: block; 72 position: absolute; 73 height: 54px; 74 width: 50px; 75 right: 0px; 76 background-color: rgba(0, 0, 0, 0); 77 border: none; 78} 79.hamburger-btn-arrows{ 80 height: 2px; 81 width: 31px; 82 border-radius: 1px; 83 margin-top: 14px; 84 margin-bottom: 13px; 85 margin-right: 25px; 86 background-color: white; 87} 88.nav__hamburger-btn--cross{ 89 display: block; 90 position: absolute; 91 height: 54px; 92 width: 50px; 93 right: 0px; 94 background-color: rgba(0, 0, 0, 0); 95 border: none; 96 color: white; 97} 98.nav__hamburger-btn--cross{ 99 display: block; 100 width: 54px;/*枠の大きさ*/ 101 height: 50px;/*枠の大きさ*/ 102 background-color: rgba(0, 0, 0, 0); 103} 104.nav__hamburger-btn--cross::before, .nav__hamburger-btn--cross::after{ 105 content: ""; 106 display: block; 107 width: 100%;/*バツ線の長さ*/ 108 height: 3px;/*バツ線の太さ*/ 109 background: white; 110 transform: rotate(45deg); 111 transform-origin:0% 50%; 112 position: absolute; 113 top: calc(14% - 5px); 114 left: 14%; 115} 116.nav__hamburger-btn--cross::after{ 117 transform: rotate(-45deg); 118 transform-origin:100% 50%; 119 left: auto; 120 right: 14%; 121} 122.background-image__white-logo{ 123 position: absolute; 124 top: 0; 125 left: 0; 126 right: 0; 127 bottom: 0; 128 margin: auto; 129 height: 187px; 130 width: 358px; 131} 132.hamburger-menu--mobile{ 133 display: none; 134} 135.hamburger-btn__cross{ 136 position: absolute; 137 top: 5px; 138 right: 20px; 139 font-size: 300%; 140 font-weight: bold; 141 color: white; 142} 143.test{ 144 display: none; 145}
JavaScript
1// 宣言 2const btn =document.getElementById('hamburger_btn'); 3 4// 処理 5btn.addEventListener('click' , () => { 6 document.getElementById('hamburger_menu').classList.toggle('test'); 7});
デベロッパツールのconsoleにてJavaScriptのコードをコピペしてみると、undefinedと出るのですが、これは機能していると見ていいのでしょうか。
回答2件
0
タイプミスじゃないかな？
hamburger-btn 上のhtml
hamburger_btn 下のJavaScript
投稿2020/07/24 12:29
総合スコア1373
現在そもそもJavaScriptが効いているかのテストのために違うidを記述してみたのですが、タイプミスなども無く一致しているのにも関わらず機能しませんでした。
そもそもこれはJavaScriptが読み込まれていないということでしょうか。
0
ベストアンサー
動作確認しました。まさかハンバーガーボタンが二つ存在するとは思わなかったです。
私の環境では上記コードを少し変えてちゃんと動きました。
HTML
1 <!-- <script href="kadai.js"></script> ← 元の記述--> 2 <script> 3 // 宣言 4 const btn = document.getElementById('hamburger_btn'); 5 6 // 処理 7 btn.addEventListener('click', () => { 8 document.getElementById('hamburger_menu').classList.toggle('test'); 9 }); 10 </script>
さて、質問の部分ですがまずJavascriptがちゃんと動作しているかどうかを調べるには
最小構成で下記のコードを試してみてアラートが表示されればJavascriptが動いています。
これが動かないのであればブラウザ側の設定でJavascriptを使わないようにしているか
ありえないと思いますが、Javascriptを実装していないブラウザを使っている。
などの可能性が考えられます。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7</head> 8 9<body> 10 <script> 11 alert("Javascriptテスト！") 12 </script> 13</body> 14 15</html>
っと
ここまで書いて気が付きました。
やはりタイプミスが一番の原因です。
HTML
1href="kadai.js" X 2src="kadai.js" 〇
投稿2020/07/25 03:04
総合スコア1373
あなたの回答
tips
プレビュー
