onclick을 이용한 Gallery

Thumbnails 사진을 하나씩 클릭할 때마다 Gallery 사진 바뀌고,
Thumbnails 사진을 하나씩 클릭할 때마다 선택된 사진의 outline 옮겨감

---

HTML

<h1>Gallery2</h1>
    <img class="pop" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGqcdOhN0mvnH5zDzO_i9K6aYzSf2mdG3XQTFb6gZO4OQ98CFksJx_qK1_td-v1MEi5RM&usqp=CAU" 
        alt="kuromi"
        id="top">

    <h2>Thumbnails</h2>
    <div class="main">
        <img class="thumbnail show" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGqcdOhN0mvnH5zDzO_i9K6aYzSf2mdG3XQTFb6gZO4OQ98CFksJx_qK1_td-v1MEi5RM&usqp=CAU" 
        alt="kuromi" onclick="one(0)">
        <img class="thumbnail" src="https://i.pinimg.com/originals/1b/cc/e8/1bcce82b5c99525fdea63cff71efc1a2.jpg" alt=""
        onclick="one(1)">
        <img class="thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYfXYgQF2Ie6p2HgDshGMyWp7VeZLMg-zDP9U3dLhaNA5yJMBHqGmMLNNP5ft081z2dVM&usqp=CAU" alt=""
        onclick="one(2)">
    </div> 

CSS

<style>
        .pop {
            width: 300px;
            display: block;
            object-fit: cover;
        }
        .main {
            display: flex;
            width: 100px;
            height: 100px;
        }
        .show {
            outline: 4px skyblue solid;
            z-index: 1;
        }
    </style>

JS

<script>
    var pop = document.getElementById("top");
    var thumbnails = document.getElementsByClassName("thumbnail");
    // lastIndex 기본 값 = 0
    var lastIndex = 0;

		// nowIndex에 대한 함수
        function one(nowIndex) {

            console.log(nowIndex)
            console.log(lastIndex)

			// nowIndex == lastIndex시 함수 강제 종료
            // 두 번 클릭 시 outline 사라짐, 
            // if문 생략 -> 한 번 클릭 시 add 실행, 
            // 두번 클릭 시 remove
            if (nowIndex == lastIndex) {
                return;
            }

			// Gallery 사진 바뀜
            pop.src = thumbnails[nowIndex].src;

            thumbnails[nowIndex].classList.add('show');
            thumbnails[lastIndex].classList.remove('show');

            lastIndex = nowIndex;
        }
    </script>

onclick

• HTML 요소(element)에서 발생하는 이벤트를 처리.
• on<이벤트 타입명> 형태를 갖는 이벤트 속성은 HTML의 모든 요소에 사용이 가능

ex ) button을 클릭했을 때 브라우저 알람으로 클릭 이라는 메시지 뜨게 하기

<button onclick="alert(textContent)">클릭</button>