끝말잇기 만들기
자바스크립트 강의
<!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>Document</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text" />
<button>입력</button>
<script>
/*첫 단어를 입력한 사람인지 판단하기 */
const number = Number(prompt("몇 명이 참가하나요?"));
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 = newWord; //입력한 단어가 제시어가 된다.
$word.textContent = word;
const order = parseInt($order.textContent); // 다른사람에게 순서를 넘기다 순서도 그리는중
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = ""; //input은 안에들어있는걸 value로 칭함 다른건 textcontent
$input.focus();
} else {
//비어있지않다.
if (word[word.length - 1] === newWord[0]) {
// 올바른가
word = newWord; //입력한 단어가 제시어가 된다.
$word.textContent = word;
const order = parseInt($order.textContent); // 다른사람에게 순서를 넘기다 순서도 그리는중
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
$input.value = "";
$input.focus();
} else {
//올바르지 않는가
alert("옳바르지 않은 단어임");
$input.value = "";
$input.focus();
}
}
};
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener("click", onClickButton);
$input.addEventListener("input", onInput);
</script>
</body>
</html>
력하세요Author And Source
이 문제에 관하여(끝말잇기 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyle-shk/끝말잇기-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
