Q&A
>undefined is not a function
それはエラー全文ですか？
https://teratail.com/help/question-tips#questionTips3-4-2
undefined is not a function が出てきます。mouseoverでメニューを表示させるまではできました。初心者なので丁寧に教えていただけるとありがたいです。
よろしくお願いします。
javascript
1const parentMenu = document.querySelectorAll(".menu > li > a"); 2for (let i = 0; i< parentMenu.length; i++) { 3 parentMenu[i].addEventListener("mouseover", function(e) { 4 e.preventDefault(); 5 this.classList.toggle("active"); 6 this.nextElementSibling.classList.toggle("active"); 7 }) 8} 9 10document.getElementsByClassName('menu').addEventListener('mouseleave', function (e) { 11 e.preventDefault(); 12 var elem = document.getElementById('menu'); 13 elem.style.display = 'none'; 14 return false; 15})
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title>Page Title</title> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7 8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 9<link rel="stylesheet" href="style.css"> 10 11</head> 12<body> 13 <header> 14 <div class="header"> 15 <h1>My Website</h1> 16 <p>A website created by me.</p> 17 </div> 18 </header> 19 20 <main> 21 <ul class="menu"> 22 <li><a href="#a">カテゴリー</a> 23 <ul class="firstly"> 24 <li class="a"><a href="#a">カテゴリー1</a></li> 25 <li><a href="#a">カテゴリー2</a></li> 26 <li><a href="#a">カテゴリー3</a></li> 27 <li><a href="#a">カテゴリー4</a></li> 28 <li><a href="#a">カテゴリー5</a></li> 29 <li><a href="#a">カテゴリー6</a></li> 30 </ul> 31 </li> 32 </ul> 33 34 <ul class="menu"> 35 <li><a href="#a">メニュー1</a> 36 <ul class="firstly"> 37 <li class="a"><a href="#a">メニュー1</a></li> 38 <li><a href="#a">メニュー2</a></li> 39 <li><a href="#a">メニュー3</a></li> 40 <li><a href="#a">メニュー4</a></li> 41 <li><a href="#a">メニュー5</a></li> 42 <li><a href="#a">メニュー6</a></li> 43 </ul> 44 </li> 45 </ul> 46 47 48 <ul class="menu"> 49 <li><a href="#a">メニュー2</a> 50 <ul class="firstly"> 51 <li class="a"> 52 <li><a href="#a">メニュー1</a></li> 53 <li><a href="#a">メニュー2</a></li> 54 <li><a href="#a">メニュー3</a></li> 55 <li><a href="#a">メニュー4</a></li> 56 <li><a href="#a">メニュー5</a></li> 57 <li><a href="#a">メニュー6</a></li> 58 </ul> 59 </li> 60 </ul> 61 62 63 <ul class="menu"> 64 <li><a href="#a">メニュー3</a> 65 <ul class="firstly"> 66 <li class="a"> 67 <li><a href="#a">メニュー1</a></li> 68 <li><a href="#a">メニュー2</a></li> 69 <li><a href="#a">メニュー3</a></li> 70 <li><a href="#a">メニュー4</a></li> 71 <li><a href="#a">メニュー5</a></li> 72 <li><a href="#a">メニュー6</a></li> 73 </ul> 74 </li> 75 </ul> 76 77 78 <ul class="menu"> 79 <li><a href="#a">メニュー4</a> 80 <ul class="firstly"> 81 <li class="a"> 82 <li><a href="#a">メニュー1</a></li> 83 <li><a href="#a">メニュー2</a></li> 84 <li><a href="#a">メニュー3</a></li> 85 <li><a href="#a">メニュー4</a></li> 86 <li><a href="#a">メニュー5</a></li> 87 <li><a href="#a">メニュー6</a></li> 88 </ul> 89 </li> 90 </ul> 91 92 93 <ul class="menu"> 94 <li><a href="#a">メニュー5</a> 95 <ul class="firstly"> 96 <li class="a"> 97 <li><a href="#a">メニュー1</a></li> 98 <li><a href="#a">メニュー2</a></li> 99 <li><a href="#a">メニュー3</a></li> 100 <li><a href="#a">メニュー4</a></li> 101 <li><a href="#a">メニュー5</a></li> 102 <li><a href="#a">メニュー6</a></li> 103 </ul> 104 </li> 105 </ul> 106 107 </main> 108 109 <script src="script.js" defer></script> 110</body> 111</html>
回答1件
0
エラー全文はおそらくこうなっているはずです（ブラウザによりかもしれませんが）
Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
機能についてのエラーであればMDNなどのリファレンスを参照します。
初心者だからこそ余計にリファレンス・ドキュメントの参照を癖づけるべきです。
getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。
getElementsByClassName() で配列風オブジェクトになります。これは1個しか存在しなくてもそうなります。
Elementsなので複数あります。
addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、
ですので、配列風オブジェクトに対してaddEventListener()は使えないので、通常は、forループなどでgetElementsByClassName()で得られた配列風オブジェクトの1つ1つを取り出しaddEventします。
投稿2020/08/28 00:05
総合スコア80875
あなたの回答
tips
プレビュー
