선생님 여쭤볼때가 없어서요 ㅠㅠ 질문좀드릴게요 ㅠ

인터랙티브 웹 개발 제대로 시작하기

3개의 문 4

작성

206

(function () {
    const Form = document.querySelector('form');
    let targetElem;
    let currentItem;

    function clickHandler(e) {
        targetElem = e.target;
        currentItem = targetElem.parentNode.parentNode;
        const black = document.querySelector('.black')
        if (targetElem.classList.contains('button1')) {
            currentItem.classList.add('black')
        }
        if (targetElem.classList.contains('button2')) {
            currentItem.classList.add('gold')
        }
    }

    Form.addEventListener('click', clickHandler)
})()
제가 버튼 1 2 클릭한것마다 body에 백그라운드색을 바꾸고
싶은데요; 이벤트 함수는 많이쓰면 안좋다고 하셔서
위임 식으로 target을 써서 하려구 하는데 이렇게 코드를치면
한번씩만 실행하고 종료를 해버리더라구요 ㅠ 어떡해 코드를
고쳐야 할까요 ㅠ?

javascript 인터랙티브 웹 HTML/CSS

답변 4

1분코딩

지식공유자

currentItem.classList.remove('gold')
currentItem.classList.add('black')
...
currentItem.classList.remove('black')
currentItem.classList.add('gold')

이런 식으로 add 하기 전에 remove로 해당되지 않는 클래스를 제거해 주세요~
add만 하고 remove는 해주지 않아서 동작이 안되는 것이거든요.

김동

질문자

아 감사드립니다 ㅠ 이미 add추가가 되잇어서 반복이 안된거였군요 ㅠ 지워주고 다시추가하는 식으로 하면 됫네요 ㅠ 감사합니다

김동

질문자

<h1>JavaScript</h1>

<form>

</form>

(function () {

const Form = document.querySelector('form');

let targetElem;

let currentItem;

function clickHandler(e) {

targetElem = e.target;

currentItem = targetElem.parentNode.parentNode;

// const black = document.querySelector('.black')

if (targetElem.classList.contains('button1')) {

currentItem.classList.add('black')

}

if (targetElem.classList.contains('button2')) {

currentItem.classList.add('gold')

}

Form.addEventListener('click', clickHandler)

})()

</sc

폼안에 버튼 두개넣엇습니다. ㅠ

1분코딩

지식공유자

구조에 따라 동작이 다를 수 있으니 html도 같이 올려주세요~

인프런 커뮤니티 질문&답변

선생님 여쭤볼때가 없어서요 ㅠㅠ 질문좀드릴게요 ㅠ