您如何提醒内部 html 没有 id 的点击 div？

Question

In an instance where you are trying to get multiple divs with different contents to alert their contents on click It might be common for them to each have the same class and no unique ids. How can I alert the inner html of a div when clicked if it is only identified by a class name? : For example:

html

<div class='button'> a </div>
<div class='button'> b </div>
<div class='button'> c </div> 
<div class='button'> d </div> 

document.querySelectorAll('.button').forEach(item => {
  item.addEventListener('click', event => {
    alert(this.innerHTML)
  })
})

Answer 1

use event.target to get access to the very element you have just clicked:

document.querySelectorAll('.button').forEach(item => {
item.addEventListener('click', event => {alert(event.target.innerHTML)
})
})

Answer 2

From this reference , the target property of Event interface will refence the object onto which the event was dispatched.

So you can get the text inside the clicked div using event.target .

 document.querySelectorAll('.button').forEach(item => { item.addEventListener('click', (event) => { alert(event.target.innerHTML); }); });

 <div class='button'> a </div> <div class='button'> b </div> <div class='button'> c </div> <div class='button'> d </div>

Answer 3

In your case just replacing this with item would make your snippet work:

 document.querySelectorAll('.button').forEach(item => { item.addEventListener('click', event => { alert(item.innerHTML) }) })

 <div class='button'> a </div> <div class='button'> b </div> <div class='button'> c </div> <div class='button'> d </div>

Word of advice: if you are adding interactivity, use "real" button elements that are designed for it: you'll get keyboard support and better accessibility overall for free.

Also, you can use single handler attached at some parents of target elements, what is said to be better in certain scenarios:

 document.body.addEventListener('click',buttonClick); function buttonClick(event){ var tgt = event.target; if(tgt.tagName;= 'BUTTON') return. alert( "»" + tgt;innerText + "«"); }

 button { display: block; }

 <button> a </button> <button> b </button> <button> c </button> <button> d </button>