title: javascript novice to ninja can't get book code to work
body: <p>I purchased an ebook from SitePoint that seemed pretty legit, but as I work through the code (chapter by chapter) I've gotten stuck after 8 chapters.  The code to this point has worked as prescribed, but I've deleted and reworked this code four times and cannot for the life of me find out what happened in the last changes where submit boxes were replaced with forms.</p>
  
  <p><a href="http://codepen.io/anon/pen/RNezjb" rel="nofollow">Codepen of related code</a><a href="http://codepen.io/anon/pen/RNezjb" rel="nofollow">http://codepen.io/anon/pen/RNezjb</a></p>
  
  <pre><code>//dom references//
  var $question = document.getElementById("question");
  var $score = document.getElementById("score");
  var $feedback = document.getElementById("feedback");
  var $start = document.getElementById("start");
  var $form = document.getElementById("answer");
  
  //view functio{ns
  function update(element, content, klass) {
      var p = element.firstChild || document.createElement("p");
      p.textContent = content;
      element.appendChild(p);
      if(klass) {
          p.className = klass;
      }
  }
  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":"Clark Kent" },
      { "question": "Wonder Woman", "answer": "Diana Prince" },
      { "question": "Batman", "answer": "Bruce Wayne"}
  ]
  };
  
  //Event Listeners
  $start.addEventListener("click", function () {
      play(quiz);
  }, false);
  
  function hide(element) {
      element.style.display = "none";
  }
  function show(element) {
      element.style.display = "block";
  }
  //play(quiz);
  hide($form);
  function play(quiz) {
      //hide button and show form
      hide($start);
      show($form);
      $form.addEventListener('submit', function(event) {
          event.preventDefault();
          check($form[0].value);
      }, false);
      var score = 0; //initialize score
      update($score, score);
      //main game loop
      var i = 0;
      chooseQuestion();
      function chooseQuestion() {
          var question = quiz.questions[i].question;
          ask(question);
      }
      //end of main game loop
      gameOver();
      function ask(question) {
          update($question,quiz.question + question);
          $form[0].value = "";
          $form[0].focus();
      }
      function check(answer) {
          if(answer ===quiz.questions[i].answer) {
              update($feedback,"Correct!","right");
              score++;
              update($score,score);
          }
          else {
              update($feedback,"Wrong!","wrong");
          }
          i++;
          if(i === quiz.questions.length) {
              gameOver();
          }
          else {
              chooseQuestion();
          }
      }
      function gameOver() {
          update($question,"Game Over, you scored " + score + " points");
          hide($form);
          show($start);
      }
  }
  </code></pre>
  
  <p>I've looked all through the forums for anybody else who may have had issues with this book code, but it seems like the book may be too new (Javascript: Novice to Ninja is the tome) for people to be having similar issues.  I have found a few misprints in the book already, but I have a feeling I have something wrong here in my code.</p>
  
  <p>Any help would be greatly appreciated.  I can't get any errors to pop up in the Console either.</p>
  
  <p>Thanks</p>