[JavaScript] 11. EventListener

2024년 07월 26일

Song hyun
작성자
2024.07.26.:41

728x90

[JavaScript] 11. EventListener

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        body{
            margin:16px;
            display:flex;
            justify-content: center;
        }
        ul{
            list-style-type: none;
            padding: 0;
        }
        li{
            background-color: #f9f9f9;
            margin: 8px 0px;
            padding: 10px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items:center;
        }
    </style>
</head>
<body>
    <div>
        <h2>EventListener를 사용한 요소 추가, 삭제, 토글 만들기</h2>
        <br><br>
    <button id="addBtn">아이템 추가</button>
    <button id="toggleBtn">리스트 토글</button>
        <br><br>
    <ul id="myList">
        <li>
            아이템1
            <button class="editBtn">수정하기</button>
            <button class="deleteBtn">삭제하기</button>
        </li>
    </ul>
    </div>
    <script>
        let count=1;
        // * 아이템 추가 기능
        // 1. 아이템 추가(addBtn) 이벤트 리스너를 등록하자.
        // 2. li 요소를 동적으로 생성
        // 3. UL 요소에 접근해서, 자바스크립트 코드로 생성한 요소를 추가하자.
        document.getElementById("addBtn").addEventListener('click',function(){
            count++;
            let newItem = document.createElement('li');
            newItem.innerHTML=` 아이템 ${count}<button class="editBtn"> 수정하기</buttin><button class="deleteBtn">삭제하기</button>`;
            document.getElementById('myList').append(newItem);
        });

        // * 아이템 토글 기능을 만들어 보자. 
        document.getElementById('toggleBtn').addEventListener('click', function() {
            let list  = document.getElementById('myList');
            list.style.display = list.style.display ==  'none' ?  '' : 'none';
        });
    </script>
</body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 13. 이벤트 위임 - 연습문제 풀이 (0)	2024.07.26
[JavaScript] 12. 이벤트 위임과 버블링 (0)	2024.07.26
[JavaScript] 10. 자바스크립트의 이벤트 처리 (0)	2024.07.24
[JavaScript] 9-1. 예제 (0)	2024.07.22
[JavaScript] 9. DOM(Document Object Model) (0)	2024.07.22

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 11. EventListener

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바