jsでボタンが押されたときに検知する仕組みを作りたい

html
1<ul id="choices">
2<li><button value="1">はい</button></li>
3<li><button value="2">いいえ</button></li>
4</ul>
5

こんなhtmlがあったときに、jsでボタンが押されたかどうかの判断をしたいです。

buttonにidやclassをつけずに、ボタンが押されたことを検知するjsを教えてください。

「はい」と「いいえ」を区別する必要はありません。

■補足

イメージ的には「id="choices"以下のボタンが押されたとき」のようなイベントが作れるような気がしているのですが、やり方がわかりません。

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

回答3件

下記のJavaScriptソースでボタン押下を検知できます。

JavaScript
1// button要素を取得
2var elements = document.querySelectorAll("#choices > li > button");
3for (let i = 0; i < elements.length; i++) {
4  elements[i].addEventListener("click", () => {
5    // ここにボタン押下時の処理を書く
6    console.log("クリック");
7  });
8}

投稿2021/03/18 14:20

akkie

総合スコア79

ベストアンサー

javascript
1<script>
2document.addEventListener('click',e=>{
3  if(e.target.closest('button').closest('#choices')){
4    console.log('choices buttun click');
5  }else if(e.target.closest('button')){
6    console.log('buttun click');
7  }
8});
9</script>
10<ul id="choices">
11<li><button value="1">はい</button></li>
12<li><button value="2">いいえ</button></li>
13</ul>
14<button value="3">てすと</button>

投稿2021/03/19 00:23

yambejp

総合スコア116661

OVERPIXEL

2021/03/19 03:37

ありがとうございます。とても参考になりました。

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

もう個々の要素にイベントを張り付けるのは止めましょう。 document から監視すれば、イベントがあった要素が取得でき、そこから祖先を辿れば大概の事は調べられます。
また document へのイベントは、要素が呼びこまれる前に定義することができます。もうその時点で document が存在するのだから。

どうしたら古典のようなやり方を止めさせることができるのやら…。

js
1<!DOCTYPE html>
2<meta charset='UTF-8'>
3<body> 
4<ul id="choices">
5<li><button value="1">はい</button></li>
6<li><button value="2">いいえ</button></li>
7</ul>
8
9<script>
10function handler (event) {
11  let e = event.target, p;
12  if ('BUTTON' === e.nodeName)
13    if (p = e.closest ('#choices'))
14      alert (`祖先の要素のID:#${p.id} の子孫のボタン要素:"${e.textContent}" が押された`);
15
16}
17
18document.addEventListener ('click', handler, false);
19
20</script>
21