자바스크립트를 이용하여,
끝말잇기를 구현하는 예제입니다.
끝말잇기를 구현하는 예제입니다.
예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다.
순수 자바스크립트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//화면구성
let body = document.createElement('h1');
document.body.append(body);
body.textContent = '끝말잇기';
//제시단어
let firstWord = document.createElement('div');
firstWord.textContent = '시작';
document.body.append(firstWord);
let form = document.createElement('form');
document.body.append(form);
let input = document.createElement('input');
form.append(input);
let btn = document.createElement('button');
btn.textContent = '클릭'
form.append(btn);
let result = document.createElement('div');
document.body.append(result);
//버튼 클릭이벤트
form.addEventListener('submit', function(e) {
e.preventDefault();
//제시단어.textContent의 마지막 글자 = input.value의 첫글자
if (firstWord.textContent[firstWord.textContent.length - 1] == input.value[0]) {
result.textContent = '딩동댕'
firstWord.textContent = input.value;
input.value = '';
input.focus();
} else {
result.textContent = '땡'
input.value = "";
input.focus();
}
})
</script>
</body>
</html>
화면 결과(Result 클릭)
반응형
'개발 > Javascript' 카테고리의 다른 글
[js] 자바스크립트로 틱택토 구현하기 (ft. e.target.value, forEach) (0) | 2020.12.22 |
---|---|
[js] 자바스크립트로 숫자야구 게임 구현하기 (0) | 2020.12.18 |
[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) (0) | 2020.12.12 |
[js] 자바스크립트로 검색 기능 구현하기 (9) | 2020.12.07 |
[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) (2) | 2020.12.06 |
댓글