JavaScriptで要素のIDを取得

programming

ボタンや要素をクリックしたとき、動画、オーディオの終了時、あるいは querySelectorall() を用いて要素の ID を取得する方法のメモ。

以下のコードは、stack overflow から。

<button id="btn1" onClick="reply_click(this.id)">B1</button>
<button id="btn2" onClick="reply_click(this.id)">B2</button>
<button id="btn3" onClick="reply_click(this.id)">B3</button>
    
<script type="text/javascript">
  function reply_click(clicked_id)
  {
      alert(clicked_id);
  }
</script>

onClick to get the ID of the clicked button

python のテンプレートで、ID にオブジェクトの uuid を付与して、javascript で uuid を取り出す方法。

<button id="btn1_{{ test.id }}" onClick="myFunction(this.id)">B1</button>
<button id="btn2_{{ test.id }}" onClick="myFunction(this.id)">B2</button>
<button id="btn3_{{ test.id }}" onClick="myFunction(this.id)">B3</button>
    
<script type="text/javascript">
  function myFunction(id)
  {
    const target = id.slice(-36);
    console.log(target); // test.id(uuid)
  }
</script>

その他、videoタグやaudioタグで、再生終了時や停止時に id を取得。

<video id="video" controls onpause="myFunction(this.id)" onended="myFunction(this.id)">

// <audio id="audio" controls onpause="myFunction(this.id)" onended="myFunction(this.id)">

<script>
function myFunction(pk) {
    console.log(pk);
}
</script>

querySelectorall() を使用して、複数の要素のidを取得。

<div id="test1" class="sample">test1</div>
<div id="test2" class="sample">test2</div>
<div id="test3" class="sample">test3</div>
<div id="test4" class="sample">test4</div>

<script>
var t = document.querySelectorAll(".sample");

t.forEach(function(item){
    let id = item.getAttribute('id');
    console.log(id);
});

</script>
参考記事

要素の取得方法まとめ

お薦め