status

• 이유 1 : 이전에 못 썼던 Toggle에 대한 분노
• 이유 2 ; : this.ClassList에서 this가 무엇을 가르키는건지 혼동
• 위 두 이유가 아쉬워서 다시 재도전

 //index.js
var targets = document.querySelectorAll('i.favorites-icon');
//targets.addEventListener('click', handleClick);

function handleClick() {
  for (let i = 0; i < targets.length; i++) {
    targets[i].classList.remove('on');
    console.log('works');
  }
  this.classList.toggle('on');
}

for (const key of targets) {
  key.addEventListener('click', handleClick);
}

solv

• process:

  • console 에 찍는것은 무의미 함( 이벤트 핸들러는 잘 작동했으니)
  • 로직이 뭔가 꼬였는데 어떻게 on 이 클래스 명에 붙는지 확인 하기 위해 resource 탭을 열어서 하나씩 찍어보기시작함
  • 1: targets 가 obj 가 아니라 array 형태로 들어가는 모양 , for in 을 for of 로 설정
  • 2 : remove를 전역에 설정하고 클릭된 엘리먼트의 클래스 목록에만 on 이 들어가면 좋겠는데
    - 3 : this , targets.classList, targets[i]를 변경해가면서 resource 창에 어떻게 들어가는 지 확인함

• 해결

  • for문이 어떻게 돌아가는건지 생각해야 했었다.
  • toggle은 이벤트 실행시 on 을 add, 다시 실행되면 on을 remove 하는 메서드인데, 단지 toggle 메서드를 쓰면 기능 구현을 일일이 수동적으로 해야한다는 점.
  • for문은 이벤트가 실행 됐을 때 전역으로 바로 실행되는 건지, 아니면 횟수 마다 갱신되는건지, 그냥 index값을 다 찾아서 전체가 기본적으로 remove 상태로 들어가는건지
  • this.classList.toggle('on') 가 실행될 때, for문이 나머지 index를 찾아서 remove 하는 형태로 로직이 구성되었다.
  • this.classList.toggle('on') 는 한번 도는데 for문이 알아서 3번찍히는 구조였음.
  • this.classList.toggle('on') 가 for 문 위에 위치할 경우 또 실행이 안됌
    • why? classList 명을 붙이는 순간 for문이 작동해서 전역을 다 지워버리니까..

• 3개 중 1개만 이벤트를 실행하게 하려면 나머지 2개의 값은 'on'의 값을 지워주는 함수가 필수였음.

detail

• 조건문이 없어도 된다는게 신기했다. 다만 for 문을 안 쓸 수는 없는걸까?
• on을 제외하는 조건문을 써서 toggle을 써보는것도 생각해봐야겠음.
• 토글의 사용을 좀 더 알게되어서 역시 조건문은 필요없었다는 것을 다시금 깨우침.