[ JavaScript ] NodeList의 각 요소들에 addEventListener 적용하기

HTML

<button id="button" type="button" class="btn btn-primary" value="www.it-trend.jp">detail</button>
<button id="button" type="button" class="btn btn-primary" value="www.ecommerce-customersupport.com">detail</button>
...

각기 다른 value값을 지닌 button 여러개를 준비 

 

JavaScript

const buttons = document.querySelectorAll('#button')
buttons.forEach(button => button.addEventListener('click', (e) => {
	console.log(e.target.value)
}));

각 버튼 요소를 누르면, 각 요소의 value 값을 console.log로 출력시킴 

 

 

각 버튼을 클릭해보면, 

 

콘솔창에서 각 button요소의 value값이 출력되는 것을 확인할 수 있습니다.