プログラムは動くが、Cannot set property 'onclick' of undefined が表示される

前提・実現したいこと

・Javascriptの勉強のためのプログラムです。
・checkboxを押した時にconsole.logを表示するプログラムです。
・プログラム自体は動いたのですが、エラーメッセージがでているため、これを解決したいです。

発生している問題・エラーメッセージ

(index):23 Uncaught TypeError: Cannot set property 'onclick' of undefined
    at (index):23
(anonymous) @ (index):23

該当のソースコード

html
1<!doctype html>
2<html>
3<body>
4<form id="test">
5    <input type="checkbox"> aaaa
6    <input type="checkbox"> bbbb
7    <div id="output"></div>
8</form>
9<script type="text/javascript">
10    function clickFnc(){
11        console.log("aaaa");
12    }
13    triggerTag = document.getElementsByTagName('input');
14    for( let i = 0; i <= triggerTag.length; i++){
15        triggerTag[i].onclick = clickFnc.bind(triggerTag[i], i);
16    }
17</script>
18</body>
19</html>

行動規範の内容に同意します

回答1件

ベストアンサー

js
1//  for( let i = 0; i <= triggerTag.length; i++){
2//                     ↓
3    for( let i = 0; i < triggerTag.length; i++){
4        triggerTag[i].onclick = clickFnc.bind(triggerTag[i], i);
5    }

投稿2019/01/07 15:26

kei344

総合スコア69407

gamips

2019/01/07 15:29

ありがとうございます！1回文余分にまわしてしまっていたのですね。

miyabi-sun

2019/01/08 03:44

補足です。考え方としては「Cannot set property 'onclick' of undefined」ですね。配列やオブジェクトから存在しない添字のアイテムを抜き出した場合undefinedになります。 JSにおいてnullやundefinedはプロパティを所持できません。プロパティにアクセスするとundefinedにそんなプロパティ無いよとエラーが出ます。そこから転じてkei344さんはfor文が一回多く回って配列から存在しないアイテム抜き出してるんじゃないか？と気付いたわけですね。このエラーは頻出するので覚えておき、同じようなエラーが出た時に読んで対処出来るようになってくださいね。