同じクラス名を持つ複数のオブジェクトのクリックを区別をしたい

実現したいこと

以下のようなHTMLを作成し，class名は同一で，idはそれぞれ異なる3つのボタンを用意しました．

HTML
1<body>
2   <button type="button" class="send_button" id="1">1</button>
3   <button type="button" class="send_button" id="2">2</button>
4   <button type="button" class="send_button" id="3">3</button>
5</body>

これに，以下のようなJavaScriptを追加しました．
ボタンを押すと，押したボタンの番号がコンソールに表示されることを目指しました．つまり，ボタン2を押すとコンソールに'2'と表示されるようなものです．

Javascript
1
2for (var i=0; i<3; i++){
3  document.getElementsByClassName('send_button')[i].onclick = function(){
4    console.log(i);
5  }
6}

発生している問題

どのボタンをクリックしても，'3'と表示されてしまいます．

補足情報

現在つくっているものの仕様上，どうしてもclass名は複数のオブジェクトで同一になってしまうので，「class名を同一にしない」や，「HTMLの仕様を変える」以外の解決方法でお願いします．

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

回答2件

onclickには引数としてeventが渡されるので、そのtargetプロパティに入る操作された要素からidやinnerTextを取得すれば良いのではないでしょうか

投稿2020/01/26 14:17

退会済みユーザー

総合スコア0

mi_ho

2020/01/27 05:20

回答ありがとうございます！途中経過ですが報告すると，以下のように書いて，idを取得しようとしているのですが， ```JavaScript var class_data = document.getElementsByClassName('send_button'); for (var i=0; i<class_data.length; i++){ class_data[i].onclick = function(){ var id_data = class_data[i].id; console.log(id_data); } } ``` 以下のようなエラーがでてしまい，いまだ解決に至っていません…． ``` Uncaught TypeError: Cannot read property 'id' of undefined at HTMLButtonElement.class_data.<computed>.onclick ```

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

ベストアンサー

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelectorAll('.send_button').forEach(x=>{
3    x.addEventListener('click',e=>{
4      console.log(x.textContent);
5    });
6  });
7});