javascriptがわからない

for文で表示したdiv要素がクリックされたときに、クリックされたdiv要素のdata-idの値を取得するにはどうすればいいですか。

イメージ
<div id="product" data-id="json[1].id" onclick="product();">
<div id="product" data-id="json[2].id" onclick="product();">
<div id="product" data-id="json[3].id" onclick="product();">

分かりにくかったらすいません。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2019/12/27 17:35

<script>

function product(obj){
console.log(obj.dataset["id"]);
}
</script>
<div id="product" data-id="json[1].id" onclick="product(this);">div1</div>
<div id="product" data-id="json[2].id" onclick="product(this);">div2</div>
<div id="product" data-id="json[3].id" onclick="product(this);">div3</div>

この回答へのお礼

できましたー。
ありがとうございます。

お礼日時：2019/12/27 20:14

No.1 回答者： fujillin 回答日時： 2019/12/27 15:51

こんにちは

＞data-idの値を取得するにはどうすればいいですか。
普通に属性値として、その要素からgetAttribute() でも取得できるはずですが、もう少し簡便な方法も用意されています。
　element.dataset.id
でもアクセス可能なはずです。
https://developer.mozilla.org/ja/docs/Learn/HTML …

この回答へのお礼

こんにちは。回答ありがとうございます。
data-idの値を取得するやり方はわかったのですが、
間違っていたらすいませんがelementはdocument.getElementById( "product" );とかのことだと思うのですが、これだとidが重複してしまってエラーがでるのですがdocument.getElementById( "product" );以外のクリックされた場所の要素だけを取得する方法はありますかね？

お礼日時：2019/12/27 17:49