HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말 잇기</title>
<link rel="stylesheet" href="./style.css">
<script type="text/javascript" defer src="./index.js"></script>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
</body>
</html>
Index.js
const number =parseInt(prompt("몇 명이 참가하나요?"), 10)
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word')
const $order = document.querySelector('#order')
let word; //제시어
let newWord; //새로 입력한 단어
const onClickButton = ()=>{
if(!word || word[word.length-1]===newWord[0]){ //제시어가 비어 있는가? 또는 올바른가?
//비어있다.
word = newWord; //입력한 단어가 제시어가 된다.
$word.textContent = word;
const order=parseInt($order.textContent)//order태그에서 text를 추출한 다음 숫자로 바꾸어서 order에 저장 → 현재순서
if(order +1>number){
$order.textContent=1; //자동형변환
} else {
$order.textContent=order+1 //현재순서 +1
}
} else { //올바르지 않은 경우
alert('올바르지 않은 단어입니다!')
}
$input.value = '';
$input.focus();
};
const onInput = (event) => {
newWord = event.target.value; //마지막 끝값이 새로운 단어가 된다.
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);