web-dev-qa-db-ja.com

同じクラスの複数の要素に「addEventListener」を追加したい

JSのイベントリスナーを通じて「onClick」でロジックを実行したいのですが、実行は1回だけのようです。 4つすべてのクラスがありますが、なぜ最初のクラスでしか機能しないように見えるのか理解できません。

HTML：

<button id='btn-1' type="button" name="first" class="breakdown main-text" onclick="enableButton('btn-2');disableButton('btn-1');show('btn-1')"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" onclick="enableButton('btn-3');disableButton('btn-2');show('btn-2')" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" onclick="enableButton('btn-4');disableButton('btn-3');show('btn-3')" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" onclick="show('btn-4')" disabled> Breakdown Ended </button>

JS：

let button1 = document.querySelector('#btn-1')
let button2 = document.querySelector('#btn-2');
let button3 = document.querySelector('#btn-3');
let button4 = document.querySelector('#btn-4');


const breakdownButton = document.querySelector('.breakdown');
breakdownButton.addEventListener('click', function() {
console.log(this.innerHTML);
});
javascripthtmladdeventlistenerdom-eventsevent-listener
4
Nakul Malhotra

コレクションを返すquerySelectorAllを使用する必要があります。今度はspread operator（3つのドット）を使用して配列に変換し、forEachを使用します。forEachコールバック内にイベントリスナーを追加します

[...document.querySelectorAll('.breakdown')].forEach(function(item) {
  item.addEventListener('click', function() {
    console.log(item.innerHTML);
  });
   });
<button id='btn-1' type="button" name="first" class="breakdown main-text"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" disabled> Breakdown Ended </button>

スニペットには、インラインイベントハンドラーもアタッチされていますが、これは不要な場合があります。

目的が[次へ]ボタンを有効にすることである場合、イベントハンドラーのコールバック関数から有効にするfunctionを呼び出すことができます

4
brk

querySelectorの-​​ ドキュメント を見てください：

querySelector（）は、指定されたセレクターまたはセレクターのグループに一致するドキュメント内で最初の要素を返します。

複数の要素を照合する場合は、querySelectorAllを使用する必要があります。これは、 単一の要素を返さないloop結果。

または、 event delegation を使用することもできます。

2
Quentin

querySelectorAllの代わりにquerySelectorを使用する必要があります。そして、このようにリストを繰り返します。

const breakdownButton = document.querySelectorAll('.breakdown');

// It add event listeners for the first button element. 
// you can use forloop or using map function to iterate for the list elements and here i used breakdownButton[0] as an example.

breakdownButton[0].addEventListener('click', function() {
  console.log(this.innerHTML);
});

ForEachやmapなどの反復関数を使用します。私はそれぞれに使用しました

const breakdownButton = document.querySelectorAll('.breakdown');
breakdownButton.forEach(function(btn) {
  btn.addEventListener('click', function() {
    console.log();
  });
});
0
htoniv