質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

ハンバーガーメニューの開閉のJavaScriptが機能しなくなりました

MIIM
MIIM

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

1グッド

1クリップ

514閲覧

投稿2022/10/13 10:22

編集2022/10/13 10:24

前提

こちら↓
「JavaScriptでbodyのスクロールを禁止するハンバーガーメニューを作る」
https://tech.arms-soft.co.jp/entry/2021/10/06/090000
のDEMOのソースをコピーし、
思い通りに改造ができるか試しましたが、
JavaScriptが機能しなくなりました。

実現したいこと

<button id="btn"> <nav id="menu"> を、それぞれidでなくclassに変更したい。

発生している問題

ハンバーガーメニューの開閉のJavaScriptが機能しなくなりました。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en" > 3 4<head> 5 6 <meta charset="UTF-8"> 7 8<!--■削除<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />--> 9<!--■削除<meta name="apple-mobile-web-app-title" content="CodePen">--> 10 11<!--■削除<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />--> 12 13<!--■削除<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />--> 14 15 16 <title>CodePen - JavaScriptでbodyのスクロールを禁止するハンバーガーメニューを作る</title> 17 18 19 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'> 20 21<style> 22@charset "UTF-8"; 23body { 24 margin: 0; 25 padding-top: 60px; 26} 27body * { 28 box-sizing: border-box; 29} 30.is-menuOpen body { 31 position: fixed; 32 top: 0; 33 left: 0; 34 width: 100%; 35 height: 100vh; 36} 37 38header { 39 position: fixed; 40 top: 0; 41 left: 0; 42 display: flex; 43 align-items: center; 44 justify-content: space-between; 45 width: 100%; 46 height: 60px; 47 z-index: 999; 48 padding-right: 15px; 49 padding-left: 15px; 50 background-color: #fff; 51} 52header .btn {/*■変更:もとはheader #btn { {でした*/ 53 position: relative; 54 background: none; 55 border: none; 56} 57header .btn:before {/*■変更:もとはheader #btn:beforeでした*/ 58 content: ""; 59 font-family: "Font Awesome 5 Free"; 60 font-weight: 550; 61 font-size: 30px; 62} 63header .btn.is-active:before {/*■変更:もとはheader #btn.is-active:beforeでした*/ 64 content: ""; 65} 66header .menu {/*■変更:もとはheader #menuでした*/ 67 position: absolute; 68 top: 60px; 69 left: 0; 70 width: 100%; 71 height: 0; 72 background-color: rgba(254,200,254,0.6);/*■変更:もとは#fffでした*/ 73 overflow: auto;/*■変更:もとはhiddenでした*/ 74 transition: height 0.5s ease-in-out; 75} 76 77main { 78 height: 2000px; 79 background-color: #f1f1f1; 80} 81main h2 { 82 display: flex; 83 align-items: center; 84 justify-content: center; 85 height: 300px; 86 margin: 0; 87 background-color: #ddd; 88} 89</style> 90 91 92 93 94 <script> 95 if (document.location.search.match(/type=embed/gi)) { 96 window.parent.postMessage("resize", "*"); 97 } 98</script> 99 100 101</head> 102 103<body translate="no" > 104 <header> 105 <h1>logo</h1> 106 <button class="btn"></button><!--■変更:もとはbutton id="btn"でした--> 107 <nav class="menu"><!--■変更:もとはnav id="menu"でした--> 108 <ul class="globalNav"> 109 <li><a href="#">一番上のメニュー</a></li><!--■変更:メニューの数を増やしました--> 110 <li><a href="#">メニュー3</a></li> 111 <li><a href="#">メニュー1</a></li> 112 <li><a href="#">メニュー3</a></li> 113 <li><a href="#">メニュー1</a></li> 114 <li><a href="#">メニュー3</a></li> 115 <li><a href="#">メニュー1</a></li> 116 <li><a href="#">メニュー3</a></li> 117 <li><a href="#">メニュー1</a></li> 118 <li><a href="#">メニュー3</a></li> 119 <li><a href="#">メニュー1</a></li> 120 <li><a href="#">メニュー3</a></li> 121 <li><a href="#">メニュー1</a></li> 122 <li><a href="#">メニュー3</a></li> 123 <li><a href="#">メニュー1</a></li> 124 <li><a href="#">メニュー3</a></li> 125 <li><a href="#">メニュー1</a></li> 126 <li><a href="#">メニュー3</a></li> 127 <li><a href="#">メニュー1</a></li> 128 <li><a href="#">メニュー3</a></li> 129 <li><a href="#">メニュー1</a></li> 130 <li><a href="#">メニュー3</a></li> 131 <li><a href="#">メニュー1</a></li> 132 <li><a href="#">メニュー3</a></li> 133 <li><a href="#">メニュー1</a></li> 134 <li><a href="#">メニュー3</a></li> 135 <li><a href="#">メニュー1</a></li> 136 <li><a href="#">メニュー3</a></li> 137 <li><a href="#">メニュー1</a></li> 138 <li><a href="#">メニュー3</a></li> 139 <li><a href="#">メニュー1</a></li> 140 <li><a href="#">メニュー3</a></li> 141 <li><a href="#">メニュー1</a></li> 142 <li><a href="#">メニュー3</a></li> 143 <li><a href="#">メニュー1</a></li> 144 <li><a href="#">メニュー3</a></li> 145 <li><a href="#">メニュー1</a></li> 146 <li><a href="#">メニュー3</a></li> 147 <li><a href="#">メニュー1</a></li> 148 <li><a href="#">一番下のメニュー</a></li> 149 </ul> 150 </nav> 151</header> 152<main> 153 <h2>title</h2> 154 <p> 155 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 156 </p> 157 <p> 158 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 159 </p> 160 <p> 161 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 162 </p> 163 <p> 164 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 165 </p> 166</main> 167<!--■削除<footer>footer</footer>--> 168<!--■削除 <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>--> 169 170 171<script>//■削除:id="rendered-js" 172const html = document.querySelector('html'); 173const btn = document.getElementByClassName('btn');//■変更:もとはconst btn = document.getElementById('btn');でした 174const menu = document.getElementByClassName('menu');//■変更:もとはconst menu = document.getElementById('menu');でした 175const headerHeight = 60; //ヘッダーの高さ 176let bodyHeight; //ウィンドウの高さを入れる場所 177let scrollpos; //スクロールの位置を入れる場所 178 179// ハンバーガーメニューの開閉 180btn.addEventListener('click', () => { 181 btn.classList.toggle('is-active'); 182 if (btn.classList.contains('is-active')) { 183 // 開く処理 184 // 現在のスクロール位置を取得する 185 scrollpos = window.pageYOffset; 186 // メニューが開いたことを示すクラスをhtmlに付与する 187 html.classList.add('is-menuOpen'); 188 // bodyのtopにスクロール位置を付与する 189 document.body.style.top = scrollpos * -1 + 'px'; 190 // ウィンドウの高さを取得 191 bodyHeight = window.innerHeight; 192 // 取得した高さを、メニューに付与する(ヘッダーの高さを引いた数) 193 menu.style.height = bodyHeight - headerHeight + 'px'; 194 } else { 195 // 閉じる処理 196 // メニューが開いたことを示すクラスをはずす 197 html.classList.remove('is-menuOpen'); 198 // スクロール位置を開いた時の位置へ戻す 199 window.scrollTo(0, scrollpos); 200 //メニューを閉じる(高さを0にする) 201 menu.style.height = 0; 202 } 203}); 204//# sourceURL=pen.js 205 </script> 206 207 208 209 210<!--■削除 <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-5e03f34e38152f20eb79c96b0b89c2d99c5085e9ae9386dc71e2f0b3c30bf513.js"></script>--> 211</body> 212 213</html>

補足情報

上記ソースコードに、
■削除したところ
■変更したところ
について、コメントアウトで記述しました。

試したこと

削除、変更をするたびにブラウザで確認しました。

const btn = document.getElementByClassName('btn');

const menu = document.getElementByClassName('menu');
のあたりを変更した時点で動かなくなりました。
他にも変更すべき場所があるのでしょうか…

※削除、変更を試した箇所はソースにコメントアウトにて記述しております

よろしくお願いいたします。

Cocode👏を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

.getElementsByClassName()はElementsと複数形になっていることから分かるように、一つの要素ではなく、HTML collectionという、配列のようなものを返します。
たとえ要素が1つしかなかったとしても、lengthが1の配列のようなものになります。
ですので0番目の要素を取得するためには以下のように書く必要があります。

javascript

1const btn = document.getElementsByClassName('btn')[0]; 2const menu = document.getElementsByClassName('menu')[0];

要素が1つしかないのが確定しているのであれば、元のコードの通りにidで取得するのが一般的で、効率的です。

(追記)
よくみると質問者様のコードはElementと単数系になっていましたので、記述ミスでもあります。

投稿2022/10/13 10:34

編集2022/10/13 10:36
Cocode

総合スコア2125

MIIM👏を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

MIIM

2022/10/14 07:57

解りやすくご説明頂き、どうも有難うございます! 書き換えたらしっかり動作しました! また、.getElementsByClassName()について詳しく調べなおしましたところ、 いくつ目の要素を取得するのかを記述する事について説明のある記事も見つけました。 なるほど、だから元URLのデモでもidでの記述になっていたんですね… これを機に、Javascriptの勉強したいと思います。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。