[JS] Carousel

let num = 1;

function handleDotClick(ev) {
    num = ev.target.id
    image.setAttribute("src", `images/${num}.png`);
}

Array.from(dots).forEach(dot => dot.addEventListener("click", handleDotClick));

이렇게 하면 쓸데없이 반복문을 사용한다고 한다.
부모를 통한 event.target을 이용해보자

const dot = document.getElementsByClassName("dot"); // HTMLCollection(5)
const dot2 = document.querySelectorAll(".dot"); // NodeList(5) 
차이점 검색하기

画像を次の画像または前の画像に移動するたびに、次のdotclassを変更してみます.

function handleNextClick() {
    num++;
    if (num === 6) {
        num = 1;
    }
    imageChange();
    dot[num-1].classList.add("clicked");
    dot[num-2].classList.remove("clicked");
}
num이 1로 변하면서 마지막 dot의 class가 remove 되지 않는다.

function handleNextClick() {
    num++;
    if (num === 6) {
        dot[num-2].classList.remove("clicked");
        num = 1;
    }
    imageChange();
    dot[num-1].classList.add("clicked");
    dot[num-2].classList.remove("clicked");
}
num이 1로 변하기 전에 dot의 class를 remove 해주자.
중복되는 코드는 함수로 변경해보자.

dotをクリックした時にdotclassに変えましょう2つの方法があります.

1) num을 이용해서 변경하기 (기존에 있는 함수를 사용할 수 있다)

function handleDotClick(ev) {
    const dotId = Number(ev.target.id);
    if (dotId !== 0) {
        dotClassRemove(num-1);
        num = dotId;
        imageChange();
        dotClassAdd();
    }
}
num이 dotId로 변하기전에 class remove 해주자

num-1을 하지않고 계속 num을 해주었는데 정신차리기..