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

Question

( 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을 써서 하려구 하는데 이렇게 코드를치면 한번씩만 실행하고 종료를 해버리더라구요 ㅠ 어떡해 코드를 고쳐야 할까요 ㅠ?

1분코딩 · Answer

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

김동 · Answer

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

김동 · Answer

< h1 > JavaScript < form > < input class = "button1" type = "button" value = "000" > < input class = "button2" type = "button" value = "fff" > < script > ( 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분코딩 · Answer

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