[Dau8] 객체와 DOM (240703)
2024. 7. 3. 17:46ㆍ공부/DGTP TIL
과제
1. <script> 태그 내에 객체를 3개 배열로 생성하기.
2. <body>아래에 버튼 1개 Div 1개 생성
3. <script> 내부에서 1번에서 만든 객체 3개를 foreach문으로 순회하면서,
div 내부에 해당 프로퍼티들이 나오도록 만들기.(단, 화면에 보여져야 하고, data-*속성에도 표기되어야 한다)
프로퍼티들이 들어갈 요소는 createElement API를 통해 생성.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Display</title>
</head>
<body>
<div id="displayDiv"></div>
<button id="displayButton">Display Objects</button>
<script>
const array1 = [
{ name: 'John Wick', job: 'Hitman', movie: 'John Wick' },
];
const array2 = [
{ name: 'Neo', job: 'The One', movie: 'Matrix' },
];
const array3 = [
{ name: 'John Constantine', job: 'Occult Detective', movie: 'Constantine' },
];
document.getElementById('displayButton').addEventListener('click', () => {
const displayDiv = document.getElementById('displayDiv');
displayDiv.innerHTML = '';
const arrays = [array1, array2, array3];
arrays.forEach(array => {
array.forEach(obj => {
const objDiv = document.createElement('div');
objDiv.className = 'object-display';
objDiv.style.fontSize = '18px';
objDiv.textContent = `Name: ${obj.name} / Job: ${obj.job} / Movie: ${obj.movie}`;
objDiv.setAttribute('data-name', obj.name);
objDiv.setAttribute('data-job', obj.job);
objDiv.setAttribute('data-movie', obj.movie);
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => {
objDiv.remove();
});
objDiv.appendChild(deleteButton);
displayDiv.appendChild(objDiv);
});
});
});
</script>
</body>
</html>'공부 > DGTP TIL' 카테고리의 다른 글
| [Day11] 프로그램 웹 개발 이론 (20240708) (0) | 2024.07.09 |
|---|---|
| [Day10] JS 비동기 - promise, async, await (240705) (0) | 2024.07.05 |
| [DAY 7] 2차원 배열 만들기 (240702) (1) | 2024.07.02 |
| [Day6] JS 반복문과 조건문 과제 (240701) (0) | 2024.07.01 |
| [CSS] Css Position, Grid, Flex (240627) (0) | 2024.06.27 |