자바스크립트가 정상작동하지 않는 이유가 뭐죠? $question 과 $feedback에서 눌값이 나오는 이유가 뭐죠?

Question

Quiz Ninja!

Score: 0

Question:

Feedback

탈퇴한 사용자 · Accepted Answer

일단 원인은 DOM 초기화 전에 자바스크립스가 수행되는 것에 있습니다.외부 자바스크립트 파일인 js/scripts.js에 의해 자바스크립트가 HTML문서에 삽입됩니다.아직 DOM이 만들어지지 않았으므로 자바스크립트를 해석하는 시점에는 엘리먼트가 존재하지 않습니다.따라서 null 값을 가지게 됩니다.따라서 DOM 초기화가 된 이후에 document.getElementById을 통해서 엘리먼트를 가져와야 합니다.아래의 이벤트 리스너에 DOM이 로드가 완료된 이후에 수행되도록 하시면 되겠습니다.document.addEventListener("DOMContentLoaded", function () {    //// dom references ////}마찬가지로 게임을 시작하는 play(quiz); 역시 해당 이벤트 리스너에 있어야겠지요.

근사한파카16 · Answer

안녕하세요.정확한 에러메세지를 알아야 원인을 찾을 수 있을거 같네요.질문주신 내용으로 유추해보자면 해당 페이지 dom 파일에 element가 없는걸로 판단됩니다. var $question = document.getElementById("question");var $feedback = document.getElementById("feedback");가져오는 객체가 없는게 아닐지요?해당 html에 question 과 feedback 을 id로 가지는 element가 있는지 체크해보세요.그리고 브라우져 상에서 해당 함수를 실행할 때 어느부분에서 에러가 나는지 디버깅 체크해보시길 바랍니다.

나의탄생 · Answer

원인은 순서상의 이유입니다.head를 먼저 읽고 body를 읽기 때문입니다.head를 먼저 읽기 때문에 document는 값이 없는 상태입니다.방법은 1. javascript를 body의 맨 아래쪽으로 옮기는 방법2. window.onload 를 통해 문서를 로드가 완료되는 시점에 실행시키도록 하는 방법이 있습니다. (추천)window.onload = function() {
     var button = document.getElementById("button");
      var rainbow = ["red","orange","yellow","green","blue","indigo","violet"];

//// dom references ////
      var $question = document.getElementById("question");
      var $score = document.getElementById("score");
      var $feedback = document.getElementById("feedback");

function update(element,content,klass) {
        var p = element.firstChild || document.createElement("p");
        p.textContent = content;
        element.appendChild(p);
        if(klass) {
          p.className = klass;
        }
      }

var score = 0;
      var quiz = {
        "name": "Super Hero Name Quiz",
        "description": "How many super heroes can you name",
        "question": "What is the real name of ",
        "questions": [
          {"question" : "Superman", "answer": "Clarke Kent"},
          {"question" : "Batman" , "answer": "Bruce Wayne"},
          {"question" : "Wonder Woman", "answer": "Dianna Prince"}
        ]
      }

function play(quiz){
        for(var i= 0,question,answer,max=quiz.questions.length;i<max;i++){
          question = quiz.questions[i].question;
          answer = ask(question);
          check(answer,i);
        }
        gameOver();
      }

play(quiz);

function ask(question){
        update($question,quiz.question + question);
        return prompt("Enter your awnser");
      }

function gameOver(){
        update($question,"Game Over, you scored " + score + "points");
      }
}