22.04.25

코드잇 강의

입력 값과 관련한 이벤트를 다룬 강의 하나를 들었는데 개념이 잘 정리 되지 않는다...

• Input: focusin, focusout / focus, blur(이벤트 버블링이 되지 않음)
• input(eventType): 입력이 시작될 경우
• change(eventType): 입력이 시작되기 전 값과 입력이 끝난 후(focus가 없어질 때)의 값이 다를 경우

실습 문제까지 풀 시간은 당장 없으니 일단 답안만 적어놓고 자야겠다.

const input = document.querySelector('#input');

function checker() {
  const words = document.querySelectorAll('.word');
  if (words.length === 0) {
    alert('Success!👏🏻');
    if(confirm('retry?')) {
      window.location.reload();
    }
  }
}

function removeWord() {
  const word = document.querySelector(`[data-word="${input.value}"]`);
  if (word) {
    word.remove();
    checker();
  }

  input.value = '';
}

input.addEventListener('change', removeWord);

word.remove()가 되네...? 일단 함수 하나 새로 만들어야 하는 거 같다는 생각은 했는데.

짧은 감상

우피클 사람들과 얘기하다 나온 배수진식 인간/문어발식 인간이 너무 인상깊어버렸다... 나는 문어발식이고 싶었지만 멀티가 안되어 강제로 배수진식으로 살게 되는 달걀...