DOM의 클래스 선택자로 접근하려고 할 때.

getElementsByClassName을 선택하면 HTML Collection 요소로 반환한다.

 

let classNum = 0;

 

function inputWord() {

    let word = document.getElementById('word').value;

    let htmlWord = '<p class ="'+'word'+classNum+'">' + word + '</p>';

    // 만약 classNum이 0보다 크면 word+(classNum-1) 값을 갖는 class를 가져온다.

    if (classNum > 0) {

        // 이전단어.

        let beforeWord = document.getElementsByClassName('word' + (classNum - 1))[0].innerText;

        

        // 이전단어의 시작문자와 입력단어의 끝문자를 비교.

        // 둘이 같으면 화면상에 입력.

        let beforeWordFirstChar = beforeWord.substring(beforeWord.length - 1); // 이전단어의 끝문자.

        let nowWordLastChar = word.substring(0,1); // 입력단어의 첫문자.

                    

        // 둘이 다르면 경고창.

        if (beforeWordFirstChar !== nowWordLastChar) {

            alert('끝말 잇기 실패!');

            return; // 종료.

        }

    }

    

    // 출력부.

    document.getElementById('wordBox').insertAdjacentHTML('beforeend', htmlWord);

    classNum++;

}