1. HTML 세팅하기

2. 이벤트 리스너 달기

document.querySelector('input').addEventListener('input', (event) => {
      console.log('글자 입력함', event.target.value);
});

• event.target.value : 함수를 넣으면 함수가 실행될 때 브라우저가 event 객체를 만들어서 인수로 넣어주는데, 그 값을 가져올 때 사용한다. 따라서 이 경우에는 사용자가 글자 입력 시 사용자가 입력한 값도 보여줄 수 있다.

3. 첫 입력 값 사용하기

const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
let word; //제시어
let newWord; //새로 입력한 단어

const onClickButton = () => {
      if (!word) {
        //비어있는 경우 
        word = newWord;
        $word.textContent = word;
				$input.value = '';
      } else {
        //비어있지 않은 경우
      }
    }
const onInPut = (event) => {
  newWord = event.target.value;
  }
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInPut);

• $word.textContent = word : 사용자가 입력한 값/제시어를 화면에 표시 (textContent는 항상 문자열로 받음)
• input태그는 안에 있는 값이 '.value'
  • 사용자 입력 창은 주로 'value' (input, select, textarea)
• span태그는 안에 있는 값이 '.textContent'
  • 대부분의 태그는 주로 '.textContent'

4. 올바른 단어인 지 확인하기

if (word[word.length - 1] === newWord[0])

• 이전 단어의 마지막 글자와 새로운 단어의 첫번째 글자를 확인하여 끝말잇기 규칙에 올바른 단어인 지 확인. 틀린 경우에는 아래와 같이 표시.

5. 순서