Novice to Ninja chapter 7 question

I am working on the quiz game project and I running into issues with the code. Even after copying and pasting the code in it still does not work. The book asks me to create a button with an ID of button but then in the JS portion it asks to getElementByID(“start”). Maybe the book had some rewrites and not every thing was adjusted.

I have made some adjustments to my code and I am still having issues. On my HTML portion if I move the button above the js script tag I am able to get my questions to pop up but it is not starting from the pushing the button. It is still automatic. If the button is below the script tag as the book asks me to do I get an error that the AddEventListener is Null.

Code Below.

HTML


<!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/styles.css">
</head>
<body>
  <header>
    <h1>Quiz Ninja!</h1>
    <p>Score: <strong id="score">0</strong></p>
  </header>
  <section id="question"></section>
  <section id="feedback"></section>



<button id="start">Click To Play Quiz Ninja</button>
<script src="js/scripts.js"></script>

</body>
</html>

JS


// welcome the user
alert("Welcome to Quiz Ninja!");

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


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

//// Event Listeners////
$start.addEventListener('click', function() { play(quiz) } , false);

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"}
    ]
}

/*
var quiz = [
    ["What is Superman's real name?", "Clarke Kent"],
    ["What is Wonderwoman's real name?", "Dianna Prince"],
    ["What is Batman's real name?", "Bruce Wayne"]
]
*/

var score = 0; // initialize score

play(quiz);

function play(quiz) {
    //main game loop
    update($score,score);
    for (var i=0, question, answer, max=quiz.questions.length; i<max; i++) {
        question = quiz.questions[i].question;
        answer = ask(question);
        check(answer);
    }
    //end of main game loop
    gameOver();
    
    function ask(question) {
        update($question,quiz.question + question);
        return prompt("Enter your answer:");
    }
    
    function check(answer) {
        if(answer === quiz.questions[i].answer){  
        update($feedback, "Correct!","right");
        //increase score by 1
        score++;
        update($score,score)
        } else {
        update ($feedback, "Wrong!", "wrong");
        }
    }
    
    function gameOver() {
        //inform the player that the game has finished and tell them how many points they have scored
        update($question , "Game Over, you scored " + score + " points");
    }
}

CSS


*{
  margin: 0;
  padding: 0;
}

header {
  font: bold 36px/120% Arial, Helvetica, sans-serif;
  background: #333;
  color: #c00;
  text-transform: uppercase;
}

section p {
    font: bold 24px/150% Arial, Helvetica, sans-serif;
    background: #ccc;
    border: #999 2px solid ;
    color: #666;
    text-align: center;
    padding: 10px;
    margin: 10px;
    width: 300px;
}

.right {
    background: #0c0;
    border: #090 2px solid;
    color: #600;
}

.wrong {
    background: 
}

button {
  font: bold 24px/150% Arial, Helvetica, sans-serif;
  display: block;
  width: 300px;
  padding: 10px;
  margin: 10px auto;
}

Hi mikebeers, welcome to the forum

That’s because the code is looking for the tag and since it doesn’t exist in the DOM yet, it fails.

That’s because in addition to a click event listener, the code itself is calling the play function. Try commenting out the line like so

var score = 0; // initialize score

// play(quiz);

function play(quiz) {

Thank you. That was it. Your comments were helpful in making sense of my issues also.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.