여러개의 element를 공통된 TagName으로 가져온다.
html코드는
<div class = "container">
<button class = "btn btn1">User1</button>
<button class = "btn btn2">User2</button>
<button class = "btn btn3">User3</button>
</div>index.js에서 element를 공통된 TagName으로 가져온다.
const users = document.getElementsByTagName('button');그 다음에 for문으로 객체의 길이만큼 돌리면서
하나씩 addEventListener를 연결해준다.
for(let i=0;i<users.length;i++){
users[i].addEventListener("click",function(){
console.log('hi');
})
}
전체코드는 :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>자바스크립트 미션 - 유저풀 띄우기 </title>
<link rel = "stylesheet" href = "index.css">
</head>
<body>
<div class = "container">
<button class = "btn btn1">User1</button>
<button class = "btn btn2">User2</button>
<button class = "btn btn3">User3</button>
</div>
<ul id ="our-list">
</ul>
<div id = "box">
<span class = "ion-checkmark-round"></span>
</div>
<script src ="index.js"></script>
</body>
</html>index.js
//제시된 데이터
var data = {
items: [
{
name: 'user1',
group: 1,
},
{
name: 'user2',
group: 1,
},
{
name: 'user3',
group: 2,
},
],
};
//위에 제시된 데이터 배열을 지시사항에 따라 div 목록으로 렌더링합니다.
const users = document.getElementsByTagName('button');
for(let i=0;i<users.length;i++){
users[i].addEventListener("click",function(){
alert(`Hi, ${data.items[i].name}! You are in group${data.items[i].group}`)
})
}
'Javascript' 카테고리의 다른 글
| 이벤트루프, 동기,비동기,Promise (0) | 2022.10.04 |
|---|---|
| 프로토타입 (0) | 2022.10.02 |
| export로 내보내고, import로 가져오기 (0) | 2022.10.02 |
| 함수선언문과 함수표현식의 차이, 호이스팅 (0) | 2022.10.02 |
| Javascript reduce사용법 (0) | 2022.10.02 |
