前提・実現したいこと
jQueryを使わずにタブによるコンテンツ切り替えを実装したい。
発生している問題・エラーメッセージ
イベントを一つずつ登録したところ、問題なく動いたのですが、
for文でli要素全てにイベント登録をしようとしたところ、下記のようなエラーが表示された。
Uncaught TypeError: Cannot read property 'addEventListener' of undefined
該当のソースコード
var ChangeContent = function() { this.init(); } ChangeContent.prototype = { init: function() { this.trigger = document.querySelectorAll('.jscChangeTabTrigger'); this.target = document.querySelectorAll('.jscChangeTarget'); document.getElementById("changeArea01").style.display='display'; document.getElementById("changeArea02").style.display='none'; this.bindEvent(); }, bindEvent: function() { var self = this; // for文でイベント登録しようとするとエラーになる for(i=0; i<=this.trigger.length; i++) { this.trigger[i].addEventListener('click', function() { self.toggle(this); }); } // ひとつずつ登録するのは問題なし // this.trigger[0].addEventListener('click', function() { // self.toggle(this); // }); // this.trigger[1].addEventListener('click', function() { // self.toggle(this); // }); }, toggle: function(trigger) { // コンテンツを全て非表示にする var targetId; for(i=1; i<=this.target.length; i++) { targetId = "changeArea" + 0 + i; document.getElementById(targetId).style.display = 'none'; }; var triggerId = this.getTargetClass(trigger); document.getElementById(triggerId).style.display = 'block'; }, getTargetClass: function(trigger) { // タブのhref属性から紐づくコンテンツを取得 var link = trigger.getAttribute('href'); return link.slice(1); }, }; var change = new ChangeContent(); change.init();
試したこと
for文を使わず一つずつイベント登録をしようとしたところ、問題なく動いた。
私の要素の取得方法が悪いのか、複数の要素にイベントを登録する方法はないのでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/13 13:02 編集