クリックされたDOM要素のidを取得して返す

できるかどうかも含め質問になります。

Javascriptにて、
「クリックされたDOM要素のidを取得し返り値とする」という関数を作りたいのですが、うまくできません。

イメージはこんな感じです。

var some_id = function(){
   // 何かの処理
   return  クリックされた要素のid

}

```

一応調べながら、以下のようなものを書いてみました。

```
<html>

<head>

<style>

#test1{
 background-color:red;
 width:100px;
 height:100px;
}


#test2{
 background-color:blue;
 width:100px;
 height:100px;
}
</style>

<script>



var Zero = function(ele){
  var eve = ele.target.id
  return eve;

}

console.log(Zero())


</script>

</head>

<body>
<div id="test1" onclick=Zero(this)></div>
<div id="test2" onclick=Zero(this)></div>
</body>

</html>

```

が、ページ読み込み時の段階で、コンソールに
Uncaught TypeError: Cannot read property 'target' of undefined
とエラーになってしまいます。

そもそもあんまり仕組みを理解していないというか、勘違いしているような気もしますが、どなたか教えていただけると幸いです。




/// 追記です。

処理としては、上記のコードでいえば、test1の方をクリックしたら、Zero()が実行され、Zero()の返り値がtest1になっているようにしたいです。

そのあとはその返り値をif文へ渡して、処理を分岐させようとしています。

if( Zero() == something){
   //何かの処理
}

kei344

2019/03/15 02:48

最終的にどういう処理をしたいのか、クリックした値で何をしたいのかを質問文に追記されてはいかがでしょう。

erdes

2019/03/15 09:20

みなさま、たくさんのご回答ありがとうございます。みなさまから頂いたアドバイスをもとにもう少しいろいろ試してベストアンサーを決めさせていたただきます。ありがとうございます！勉強になります！

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

回答5件

target プロパティは Element ではなく Event が持っているので、既存のコードを生かすのであれば、

JavaScript
1var Zero = function(event) {
2  var id = event.target.id;
3  console.log(id); // test1
4  return id;
5}

HTML
1<div id="test1" onclick="Zero(event);"></div>

投稿2019/03/15 03:15

x_x

総合スコア13749

think49

2019/03/15 03:23

return id; の返り値が破棄されるので、このコード上では不要な気がします。

x_x

2019/03/15 03:25

「クリックされたDOM要素のidを取得し返り値とする」という要件に従ったまでです。この先どうしたいのかはわかりません。

think49

2019/03/15 03:28

なるほど。確かに不明ですね。

erdes

2019/03/15 09:16

みなさまご回答ありがとうございます。このあたり自分も仕様を理解していないので質問が曖昧になり申し訳ありません。

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

ベストアンサー

JavaScriptは上から順に実行され、その時点で持っている情報しか使えません。

js
1var Zero = function(ele){
2  var eve = ele.target.id
3  return eve;
4
5}
6// この時点でクリックが起きていない
7console.log(Zero())

クリック後の情報を使って処理したいのであれば、クリックイベント内でその処理を呼び出す必要があります。

js
1var aaa = '';
2document.addEventListener( 'DOMContentLoaded' , function( e ) {
3	document.getElementById( 'test1' ).addEventListener( 'click', function( e ) {
4		aaa = e.target.id;
5		// ここで別関数を呼ぶとか
6		other_function( aaa ); // ← 例
7	}, false );
8	document.getElementById( 'testtesttest' ).addEventListener( 'click', function( e ) {
9		if ( aaa !== '' ) {
10			// クリックされたら値が入っている変数を使って処理を分岐するとか
11		}
12	}, false );
13}, false );

投稿2019/03/15 03:09

kei344

総合スコア69407

element.id

https://developer.mozilla.org/ja/docs/Web/API/Element/id

event.target, event.currentTarget

click された要素ノードを得る方法はいくつかあります。

event.target
event.currentTarget
event.target と event.currentTarget の間にあるノード

3つ目は下記ログの方法で実装します。
https://teratail.com/questions/50655

イベントバブリング

そもそもあんまり仕組みを理解していないというか、勘違いしているような気もしますが、

イベントバブリングを調べることをお勧めします。
https://uhyohyo.net/javascript/3_3.html

Re: erdes さん

投稿2019/03/15 03:45

think49

総合スコア18164

idを持つ要素の内側をクリックしたときにどうしたいかによります

javascript
1<script>
2document.addEventListener('click',function(e){
3  var t=e.target;
4  if(t.id) console.log(t.id);
5});
6</script>
7<body>
8<div id="test1">test1</div>
9<div id="test2">test2</div>
10<div id="test3">test3
11<div id="test4">test4
12<div>test5</div>
13test4</div>
14test3</div>