初歩的な事か思いますがjavascriptで困ってます。初心者です。

Question

###前提・実現したいこと
javascript初心者です。
勉強の為に以下のようjsを作っています。

javascriptを使って、
ulタグの中のliタグの中にあるa要素をクリックしたときに、イベントが発生するjsを書きたい。（とりあえずalert）

###発生している問題・エラーメッセージ
そもそもの組み方がわかりません。
ページ内に二つ以上ある同じクラス名のulタグを探して取得し、さらにその中にあるliタグを取得して、a要素の取得をしクリックイベントを実現したい。
alert(btnLi); でliの配列が取得できるかと思ってましたがダメでした。
こうした方がいいなどあればお願いします。

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

<ul class="btnList">
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
</ul>

<ul class="btnList">
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
</ul>

<script>
    var btnList = document.getElementsByClassName('btnList');
    for (var i = 0; i < btnList.length; i++) {
        var btnLi = btnList[i].children;
        for (var j = 0; j < btnLi; j++) {
            alert(btnLi);
        }
   }
</script>

###試したこと
初めてforの中にforを入れてみました。
ダメでしょうか？

###補足情報(言語/FW/ツール等のバージョンなど)
特になし

Answer 1

どこが問題か等は分かっていますか？
たとえば、一行ずつ alert を仕込んでいくと、問題箇所を絞り込めます。

※ただし、LOOP の中でアラートを出すと 毎LOOP 出てしまうので気を付けてください。

var btnList = document.getElementsByClassName('btnList');
alert("000");  // ★これが出るならこれ以前のコードはひとまず動いている

for (var i = 0; i < btnList.length; i++) {
    alert("001");  // ★

    var btnLi = btnList[i].children;
    alert("002");  // ★

    for (var j = 0; j < btnLi; j++) {
        alert("003");  // ★

        alert(btnLi);
    }
}

これを仕込んでみると、003 の alert が出ないと思います。

ということは、002 と 003 の間に何か間違いがあるということになります。

for 文ですね。var j の宣言は問題なさそうです。LOOPカウンタの判定はどうでしょうか…？

Comments

[退会済みユーザー]

多分書き方？処理の仕方に間違いがあるからアラート3が出ないのかなと思っています。
複数あるulの中のひとつを取得しつつ（これはできてる）、その取得したulの中でまた特定のliを取得（これができない）したいのですが。。。

[sk_3122]

（もう一度よく… 2 つ目の for 文を見てください…
1つ目の for 文は通っているのです…
1つ目の for 文と 2つ目の for 文を… よく見比べてください…
両者には明らかに違う箇所があります…
「LOOPカウンタの宣言」
「LOOPカウンタの判定」
「LOOPカウンタの増加」
これのうちどこかに… 書き方が違う箇所がありませんか…？）

[退会済みユーザー]

lengthが抜けてました！
無事動きました！
思い通りの処理はまだできてませんが先に進むことができました。
ありがとうございます！

[sk_3122]

(´∀`)b

Answer 2

<script>がないのと、数字の＜で比較できるものは数字なんじゃないかなと言うことをちょっと思った。

Answer 3

Javascriptのコードは<script>タグで囲っていますか？

Comments

[退会済みユーザー]

失礼しました。
HTMLはHTMLファイルに、jsは外部ファイルでやってたのでscriptタグは省いていました。
わかりずらかったですね。追記しておきます。