•
시작하기 전, 꼭 순서도를 그려보고 코드와 비교해보는 것이 좋음!
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10); // 사용자에게 값을 전달받음
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);
</script>
</body>
</html>
JavaScript
복사
