aタグからjavascriptにidを渡す方法

お世話になります。
html勉強中のものです。

aタグをクリックし
javascriptに飛ばす際に
idを渡すことはできないでしょうか？

サイトを参考にコードを書いてみましたが
undefinedとなってしまいました。

以下、簡略化したソースとなります。
ご存じの方いらっしゃいましたら、ご教授いただけますと幸いです。

javascript
1  <script language="javascript" type="text/javascript">
2    function alertId(ele){
3        alert(ele.id);
4    }
5  </script>
6

html
1<a id="test" href='javascript:alertId(this);'>
2    リンク
3</a>
4

m.ts10806

2020/04/24 13:47 編集

JSP　はどのように関係するのでしょう。 https://teratail.com/tags/JSP

Masa_mi

2020/04/24 13:50

失礼しました。タグを削除しました。

think49

2020/04/25 05:50

質問を根幹から否定しますが、そもそも、リンクではないものはa要素でマークアップすべきではありません。そして、m.ts10806さんが回答しているonclickなら、a要素でなくとも有効です。

Masa_mi

2020/04/26 11:41

コメントありがとうございます。おっしゃる通りですね。気をつけてコードを書いていきたいと思います。

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

回答2件

こういうときに有効なのはalertよりconsole.log()です。
デバッグ時にはalert()より使うべきです。
結果はブラウザの開発ツールの「コンソール」に出力されます。

js
1console.log(ele);

これで「そもそもidというプロパティはあるのか」「そもそもthisで渡ってきているのか」が確認できます。
つまり、ここに出てこない情報は参照できないということになります。

結論としてはoncick属性に持たせるです。

html
1 onclick="alertId(this);"

hrefだと本来は「リンク先を指定する」ものですから、コンソールに「Window」と最上部が出てきてしまうわけです。
JavaScriptはイベント駆動なので、イベントが指定されないthisはWindowになると考えて良いです。
onclickにすることで「aでイベントが発生した」と解釈させることができるので、thisはイベントが発生したaタグ　になるわけですね。

※説明自体、自身の感覚に近いので、厳密には違うかもしれませんが、状況的には合ってるはず・・・

投稿2020/04/24 14:24

m.ts10806

総合スコア80875

Masa_mi

2020/04/26 11:45 編集

ご回答、ありがとうございます！もろもろ、参考にさせていただきます。申し訳ないのですが時間の差でベストアンサーを決めさせていただきました。

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

ベストアンサー

取得できた方法を記載します。

Javascript
1<html>
2<head>
3
4<script language="javascript" type="text/javascript">
5function alertId(e)
6{
7    var id = e.id;
8    alert(id);
9}
10</script>
11
12<body>
13
14<a id="test" onclick="alertId(this);" href="#">リンク</a>
15
16</body>
17</head>
18</html>