index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>끝말잇기 게임</h1>
</div>
<div>
<span>제시어 : </span>
<span id="word">한글</span>
</div>
<form id="form">
<input type="text" id="input">
<button type="submit" id="btn">입력</button>
</form>
<div id="result"></div>
<script src="./index.js"></script>
</body>
</html>index.html
const form = document.querySelector('#form');
form.addEventListener('submit', (e) => {
const word = document.querySelector('#word').textContent;
const input = document.querySelector('#input').value;
const lastLetter = word.substr(-1);
const firstLetter = input[0];
const err = '글자를 입력하세요!'
if (input){
if (lastLetter === firstLetter){
document.querySelector('#word').textContent = input;
document.querySelector('#result').textContent = '정답!'
document.querySelector('#input').value = '';
}
else {
document.querySelector('#result').textContent = '땡!'
}
}
else {
alert(err);
}
e.preventDefault();
});
글자의 끝말에 맞는 다음 글을 입력하면 정답이 뜨면서 입력글이 넘어가고, 만약 끝말과 다른 글을 적으면 아무것도 되지 않는다.
코드 분석.
js 분석.
const form = document.querySelector('#form');
id 폼을 가져온다.
form.addEventListener('submit', (e) => {
const word = document.querySelector('#word').textContent;
끝말잇기의 말을 가져옴. (textContent는 innerhtml과 비슷한 역할을 함. 내부의 글을 가져옴.)
const input = document.querySelector('#input').value;
글적는 란을 가져옴
const lastLetter = word.substr(-1);
substr은 문자열에서 특정부분만 골라오는 메서드. string.substr( start, length )으로 사용가능. 따라서 위의 (-1)은 문자의 맨 끝말을 가져온다.
const firstLetter = input[0];
입력한 문자의 첫 말을 가져옴.
const err = '글자를 입력하세요!'
에러문 출력.
if (input){
if (lastLetter === firstLetter){
document.querySelector('#word').textContent = input;
document.querySelector('#result').textContent = '정답!'
document.querySelector('#input').value = '';
} 첫말과 끝말이 같으면 문자를 바꾸고 정답을 출력. 입력란은 비운다.
else {
document.querySelector('#result').textContent = '땡!'
}다르면 땡을 출력.
}
else {
alert(err);
}아무것도 입력하지 않고 제출을 누르면 에러문을 안내한다.
e.preventDefault();
초기화.
});
