Javascript funktioniert nicht auf App

Question

Also versuche ich eine Quiz-App nach dem Code von this blog post (codepen example) zu bauen.

Ich habe alles getan, aber die JS scheint nicht zu funktionieren, da keine Fragen oder Antworten oder irgendetwas auftaucht, außer HTML und CSS. Here's my JSFiddle attempt zusammen mit dem Code

window.onload = function() { 

    var questionArea = document.getElementsByClassName('questions')[0], 
     answerArea = document.getElementsByClassName('answers')[0], 
     checker  = document.getElementsByClassName('checker')[0], 
     current  = 0, 


     allQuestions = { 
      //question and answer list, the number is the index of the answers 
      'madrugada' : ['journey', 'dawn', 'mother', 1], 
      'manzana' : ['apple', 'insane', 'men', 0], 
      'vivir' : ['villain', 'to live', 'to go', 1], 
      'amarillo' : ['love', 'river', 'yellow', 2], 
      'almendra' : ['almond', 'cheese', 'rails', 0], 
      'cascabel' : ['jingle bell', 'helmet', 'beauty', 0], 
      'aceituna' : ['tuna', 'oil', 'olive', 2], 
      'azar' : ['king', 'chance', 'zebra', 1], 
      'milagro' : ['voyage', 'tea', 'miracle', 2], 
      'añoranza' : ['snore', 'dusk', 'longing', 2], 
      'abecedario' : ['cedar', 'alphabet', 'ability', 1], 
      'frenesí' : ['frenzy', 'freaky', 'neat', 0], 
      'hechizo' : ['spell', 'done', 'zone', 0], 
      'alma' : ['almond', 'soul', 'leaf', 1], 
      'mariposa' : ['marriage', 'pose', 'butterfly', 2], 
      'siempre' : ['person', 'always', 'simple', 1], 
      'anochecer' : ['dusk', 'anual', 'dawn', 0], 
      'chiste' : ['clean', 'cheese', 'joke', 2], 
      'ojo' : ['eye', 'eight', 'dot', 0], 
      'ojalá' : ['eyeball', 'hopefully', 'lullaby', 1] 
     }; 


    function loadQuestion(curr) { 
     //Loads questions into question area 

     var question = Object.keys(allQuestions)[cur]; 
     //remove everything in q area and add current question in 
     questionArea.innerHTML = ''; 
     questionArea.innerHTML = question; 
    } 

    function loadAnswers(curr) { 
     //Loads all the possible answers of the given question 

     var answers = allQuestions[Object.keys(allQuestions)[curr]]; 
     //empty answer area 
     answerArea.innerHTML = ''; 
     //add possible answers to answerArea 
     for (var i = 0; i < answers.length - 1; i++) { 
      var createDiv = document.createElement('div'), 
       text = document.createTextNode(answers[i]); 

      createDiv.appendChild(text); 
      //adds an onclick function to the answer; a click will execute a function to check if the answer was correct 
      createDiv.addEventListener("click", checkAnswer(i, answers)); 

      answerArea.appendChild(createDiv); 
     } 
    } 

    function checkAnswer(i, arr) { 
     //checks if answer given is same as the correct one, and if it is the last question. If it is the last question, it empties answerArea 

     return function() { 
      var givenAnswer = i, 
       correctAnswer = arr[arr.length - 1]; 

      if (givenAnswer === correctAnswer) { 
       addChecker(true); 
      } else { 
       addChecker(false); 
      } 

      if (current < Object.keys(allQuestions).length - 1) { 
       current++; 

       loadQuestion(current); 
       loadAnswers(current); 
      } else { 
       questionArea.innerHTML = '¡Fin!'; 
       answerArea.innerHTML = ''; 
      } 
     }; 
    } 

    function addChecker(bool) { 
     //adds div element to page, used to see whether answer was correct or false 

     var createDiv = document.createElement('div'), 
      txt  = document.createTextNode(current + 1); 

     createDiv.appendChild(txt); 

     if (bool) { 
      createDiv.className += 'correct'; 
      checker.appendChild(createDiv); 
     } else { 
      createDiv.className += 'false'; 
      checker.appendChild(createDiv); 
     } 
    } 
}; 

Vielen Dank für jede Hilfe!

Answer 1

Sie haben nicht die Funktionen aufgerufen, die zum Starten erforderlich sind, sondern Sie haben sie nur in Ihrem Code definiert. Rufen Sie sie als solche ...

// Start the quiz right away 
loadQuestion(current); 
loadAnswers(current); 

Auch nicht mit window.onload für JSFiddle stören.

---

JSFiddle Link - aktualisiert Beispiel