JavaScriptでクリックした要素のインデックス番号を知りたい

###前提・実現したいこと
現在JavaScriptでクリックした要素のインデックス番号をconsole.logにて出力させるようなプログラムを作成しています。以下のように作成したのですが、console.logには4しか出力できず、なぜこのようになるのかもよくわからない状態です。

###発生している問題・エラーメッセージ
・クリックした要素のインデックス番号を出すことができない
・クリックすると4しか出力されない

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<meta charset="utf-8">
4</html>
5<body>
6<ul id="q7">
7    <li>1</li>
8    <li>2</li>
9    <li>3</li>
10    <li>4</li>
11</ul>
12</body>

JavaScript
1<script type="text/javascript" src="js/jquery.js"></script>
2<script type="text/javascript">
3    var q7 = document.getElementById("q7"),
4        q7_li = q7.getElementsByTagName("li"),
5        q7_length = q7_li.length;
6
7    for(var i = 0 ; i < q7_length ; i++){
8        q7_li[i].onclick = function(){
9            console.log(i);
10        }
11    }
12</script>

初心者のため、なるべく分かりやすいアドバイスをよろしくお願いいたします。

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

回答3件

ベストアンサー

「var i = 0;」でiを宣言していますが、varを使って宣言した変数は宣言された箇所以降で参照可能となります。
for文でiをインクリメントしてるので、ループを抜けたところでiの値は4になっています。
onclickで実行されるfunctionの中では「変数iの値をコンソール出力する」という処理なので「iの値=4」しか出力しないのです。
インデックスを出力したいなら、こんな風に書けばよいと思います。

javascript
1q7_li[i].onclick = (function(a){
2    return function(){console.log(a);};
3})(i);
4

投稿2016/04/27 10:54

tkturbo

総合スコア5572

vnsa7221

2016/04/27 15:00

tkturboさん回答ありがとうございます。無名関数を用いてクリックした箇所におけるiを引数としてaで与えるというこちらの方法でなんとか思い通りの動きを作ることができました。1つクッションを入れる必要があったのですね。今回一番回答が早かったのでベストアンサーに選ばせていただきました。ありがとうございました。

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

リスナーオブジェクトを指定して this.i に埋め込んでみてはどうでしょうか。

JavaScript
1'use strict';
2function handleClick (event) {
3  console.log(this.i);
4}
5
6var li = document.querySelectorAll('#q7>li');
7
8for(var i = 0, l = li.length; i < l; i++){
9  li[i].addEventListener('click', {handleEvent: handleClick, i: i}, false);
10}

また、これは使えるか分かりませんが、せっかくテキストノードに index に相当するテキストノードがあるので event.target を参照しても良いと思います。

JavaScript
1'use strict';
2document.getElementById('q7').addEventListener('click', function handleClick (event) {
3  var li = event.target;
4
5  if (li.tagName === 'LI') {
6    console.log(li.firstChild.data);
7  }
8}, false);

状況次第ですが、<li data-i="0">1</li> のように data-* 独自属性に index を埋め込むのも一考の余地があると思います。

Re: vnsa7221 さん

投稿2016/04/27 11:09

編集2016/04/27 11:12

think49

総合スコア18194

vnsa7221

2016/04/27 15:05

think49さん回答ありがとうございます。 this.iという方法があるのですか・・・。自分の知らない解法がいろいろあるのですね。さまざまな解法を提示していただきありがとうございます。こちらの方法を用いて同様に動作させることができるのか試してみたいと思います。ありがとうございました。

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

javascript
1function(){
2    console.log(i);
3}

の i は

javascript
1for(var i = 0 ; i < q7_length ; i++){ }

で利用しているグローバル変数 i を参照しているからです。

i=0 → q7_li[0].onclick = function(){ console.log(i); } → i++ → i=1
i=1 → q7_li[1].onclick = function(){ console.log(i); } → i++ → i=2 
i=2 → q7_li[2].onclick = function(){ console.log(i); } → i++ → i=3 
i=3 → q7_li[3].onclick = function(){ console.log(i); } → i++ → i=4 
i=4 → i >= q7_length になって終了

という処理を経て、iには4が入っています。

この状態でclickすると console.log(i)により、4が出力されるというわけです。

クリックしたliの番号を表示したいのであれば、

javascript
1function(){
2    console.log(this.innerHTML);
3}

投稿2016/04/27 11:01

退会済みユーザー

総合スコア0

vnsa7221

2016/04/27 15:03

luckerさん回答ありがとうございます。 console.log(i)の出力が4のみになってしまう理由が一番詳しくてわかりやすかったです。この方法ではループが終了するまでconsole.logが出力されないということなんですね。まだまだ勉強不足です。もっと頑張りたいと思います。ありがとうございました。

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

あなたの回答