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++;
}
'JavaScript > DOM' 카테고리의 다른 글
DOM 에 html 을 출력하는 함수. (0) | 2021.01.10 |
---|