Q&A
前提
こちら↓
「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');
のあたりを変更した時点で動かなくなりました。
他にも変更すべき場所があるのでしょうか…
※削除、変更を試した箇所はソースにコメントアウトにて記述しております
よろしくお願いいたします。
回答1件
0
ベストアンサー
.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
総合スコア2314
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/10/14 07:57