자바스크립트가 정상작동하지 않는 이유가 뭐죠? $question 과 $feedback에서 눌값이 나오는 이유가 뭐죠?
function update(element,content,klass) {
var p = element.firstChild || document.createElement("p");
p.textContent = content;
element.appendChild(p);
if(klass) {
p.className = klass;
}
}
complete JS file
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 check(answer,index){
if(answer === quiz.questions[index].answer){
update($feedback,"Correct!","right");
score++;
}
else{
update($feedback,"Wrong!","wrong");
}
}
function gameOver(){
update($question,"Game Over, you scored " + score + "points");
}
Html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="A quiz game for ninjas">
<meta name="author" content="DAZ">
<title>Quiz Ninja</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Quiz Ninja!</h1>
<p>Score: <strong id="score">0</strong></p>
</header>
<script src="js/scripts.js"></script>
<section id="question">
<p>Question:</p>
</section>
<section id="feedback">
<p>Feedback</p>
</section>
</body>
</html>