Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
現在JavaScriptのイベントバブリング、イベントキャプチャリングの勉強をしております。イベントの処理される順番を見たかったのですが、
なぜ Uncaught TypeError: sections_a.addEventListener is not a function のエラーが出るのかわかりません。ご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
###発生している問題・エラーメッセージ
処理が該当の箇所（20行目）で滞ってしまっております。なぜ Uncaught TypeError: sections_a.addEventListener is not a function のエラーが出るのかわかりません。
エラーメッセージ
Uncaught TypeError: sections_a.addEventListener is not a function
###該当のソースコード
<!doctype html> <html> <head> <title>test</title> </head> <body> <section class="sections_a, sections_b"> <section onclick="console.log('section1')"> <div id="aaa" onclick="console.log('div2')"> <p onclick="console.log('p');">test</p> </div> </section> </section> <script type="text/javascript"> var div = document.getElementById('aaa'); var sections_a = document.getElementsByClassName('sections_a'); var sections_b = document.getElementsByClassName('sections_b'); sections_a.addEventListener('click', function sec_2(){ console.log('section_a'); }, true); div.addEventListener('click',function(){ console.log('div'); },true); sections_b.addEventListener('click', function(){ console.log('sections_b'); }, true); </script> </body> </html>
回答3件
0
ベストアンサー
Element.getElementsByClassName() の返り値は HTMLCollection という配列のようで配列でないもので返ってきます。
下記の記事の例文のように for で処理するのが、とりあえずわかりやすいと思います。
【document.getElementsByClassName() - classで要素を取得する】
https://syncer.jp/javascript-reference/document-getelementsbyclassname
JavaScript
1// [class="aaa"]を取得 2var elements = document.getElementsByClassName( "aaa" ) ; 3 4// 取得した要素の文字色を赤にする (最初の要素から順に処理) 5for( var i=0,l=elements.length; l>i; i++ ) { 6 var element = elements[i] ; 7 element.style.color = "red" ; 8}
投稿2017/06/29 15:26
総合スコア69583
0
まず
<section class="sections_a, sections_b">
クラスの区切りは空白文字なので、sections_aの後ろのカンマが悪さをします。
その上で、こんな感じでHTMLCOllectionで掴んで、prototypeで調整
javascript
1window.onload=function(){ 2 a.addEventListener('click',function(){console.log('sec_a');},true); 3 b.addEventListener('click',function(){console.log('sec_b');},true); 4} 5 6var a= document.getElementsByClassName('sections_a'); 7var b= document.getElementsByClassName('sections_b'); 8HTMLCollection.prototype.addEventListener=function(x,y,z){ 9 if(typeof z=="undefined") z=false; 10 Array.prototype.map.call(this,function(i){ 11 i.addEventListener(x,y,z); 12 }); 13}
HTML
1<div class="sections_a sections_b">test</div> 2<div class="sections_a">test2</div> 3<div class="sections_b">test3</div> 4
（一部調整しました）
投稿2017/06/30 00:56
編集2017/06/30 01:13
総合スコア116547
あなたの回答
tips
プレビュー
