카테고리

질문 & 답변
세부 분야

프로그래밍 언어
해결 여부

미해결

안녕하세요. 끝말잇기 order가 안넘어가고 [object HTMLSpanElement]1번째 참가자 이렇게 나옵니다.

23.06.26 11:07 작성 조회수 457

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>끝말잇기</title>
    <style></style>
  </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"); // word는 id니까
      const $order = document.querySelector("#order");
      let word; // 제시어
      let newWord; // 새로 입력한 단어

      const onClickButton = () => {
        if (!word) {
          // 제시어가 비어 있는가?
          // 비어 있다
          word = newWord; // 입력한 단어가 제시어가 된다. 데이터를 바꾸고
          // 화면도 바꿔줘야 함
          $word.textContent = word;
          const order = Number($order.textContent); // order 숫자로 변환, 현재 순서
          if (order + 1 > number) {
            // 현재 순서에서 1을 더한 값이 number보다 크다면
            $order.textContent = 1; // 다음 순서를 1로
          } else {
            // 그렇지 않다면
            $order.textContent = order + 1; // 다음 순서를 현재 순서 + 1로
          }
          $input.value = ""; // 입력칸 다시 공백으로
        } else {
          // 비어 있지 않다
          if (word[word.length - 1] == newWord[0]) {
            // 올바른가? -- 제시어의 마지막 글자와 새로 입력한 단어의 첫 번째 글자가 일치
            word = newWord;
            $word.textContent = word;
            if (order + 1 > number) {
              $order.textContent = 1;
            } else {
              $order.textContent = order + 1;
            }
            $input.value = "";
          } else {
            // 올바르지 않은가
            alert("올바르지 않은 단어입니다!");
          }
        }
      };
      const onInput = (event) => {
        newWord = event.target.value;
      };

      $button.addEventListener("click", onClickButton);
      $input.addEventListener("input", onInput);
    </script>
  </body>
</html>

스크린샷 2023-06-26 오전 11.06.00.png