Button이 여러개가 있다.
<!-- HTML -->
<button name='btn' id='a'>a</button>
<button name='btn' id='b'>b</button>
<button name='btn' id='c'>c</button>
<button name='btn' id='d'>d</button>
<button name='btn' id='e'>e</button>
<button name='btn' id='f'>f</button>
<button name='btn' id='g'>g</button>
<button name='btn' id='h'>h</button>
각 버튼을 눌렀을 때 id를 가져와보자
// javascript
// Name 으로 button 들을 가져온다
var btns = document.getElementsByName("btn");
// 가져온 버튼들(NodeList)에 forEach 로 EventListener 를 추가해준다.
btns.forEach(element => element.addEventListener('click', function(e){
// e는 클릭 이벤트, e.target 으로 클릭된 객체를 가져온다.
console.log(e.target);
console.log(e.target.id);
// a 를 눌렀을 때 :
// <button name="btn" id="a">a</button>
// a
}))
var btns = document.getElementsByName("btn")
btns.forEach(element => element.onclick = function(element){
console.log(e.target)
console.log(e.target.id)
})
물론 onclick 으로도 가능하다
'Frontend > Javascript' 카테고리의 다른 글
[Javascript] insertAdjacentHTML() (10) | 2020.04.09 |
---|---|
[javascript] jQuery 의 document ready 대체 (19) | 2020.04.07 |
[Javascript] Math.random() 난수 생성하기 (21) | 2020.04.05 |
[Javascript] XMLHttpRequest 로 GET 하기 (17) | 2020.04.02 |
[Javascript] Input 엔터 키로 후 입력 값 받아오기 (17) | 2020.04.01 |