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

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

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

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

Q&A

解決済

1回答

710閲覧

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

MIIM

総合スコア1

JavaScript

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

1グッド

1クリップ

投稿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👏を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

総合スコア2314

MIIM👏を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MIIM

2022/10/14 07:57

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

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

JavaScript

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