inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

틀렸을 때 오류 표시하기

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

658

정제경(jay)

작성한 질문수 1

0

<!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

 

2번째 참가자 라고 떠야하는데 [object HTMLSpanElement]1번째 참가자가 대신 뜹니다ㅠㅠ

javascript

답변 1

0

정제경(jay)

코드 중복화 단계까지 하고 Number을 했을 때도 문제가 발생했었는데 parseInt로 변경 후 해결 됐습니다...! 근데 왜 그런지 알 수 있을까요? ㅠㅠ

0

제로초(조현영)

order를 console.log 찍어보시면 될 것 같습니다.

자바스크립트 입문 강의 재생 안됨

0

76

2

쿵쿵따 조건문 질문입니다.

0

74

2

렛츠가릿 자바스트립트와 공유가 되나요

0

77

1

수강을 하기 전 공부순서에 관한 질문이 있습니다.

1

100

2

안녕하세요

0

101

2

1~45 필터링하는 코드에서 find대신 some써주는게 나을거같습니다.

1

76

2

고차 함수 작성법과 수업 진도 관련한 질문

0

82

3

break와 continue 9:55 내 continue 구문 질문

0

153

2

옵셔널 체이닝 적당한 깊이는 어느 정도인가요?

0

121

2

로또 추첨기 중 입력값을 검사할 때

0

137

2

2-14.else,else if,switch 관련 질문입니다.

0

109

2

가위바위보 이미지(rsp.png)가 안보여요

0

264

3

Math.random() 에 9을 곱하는 이유

0

175

4

클로저 관련해서 질문있습니다.

1

189

2

유튜브 댓글 보고 왔습니다!- 퀴즈 중복된 숫자 검사 for 문

0

246

1

event.target.textContent관련 질문

0

273

2

객체 참조 관련 질문

0

179

1

-2+ -2 = -4 음수 더하기 음수 - 셀프체크 계산기

0

467

1

별찍기 마름모 문제입니다.

0

352

2

숙제 질문

0

217

1

5강 async/await으로 가독성 높이기에서

0

231

1

야구게임 관련 질문입니다

0

186

1

쿵쿵따, 계산기에서 변수 선언

0

181

1

지뢰 힌트 사라짐(대괄호)

0

167

1