Javascript not working on app

Question

So I'm trying to build a quiz app following the code from this blog post (codepen example).

I've done everything but the JS doesn't seem to be working, as no questions or answers or anything shows up, except the HTML and CSS. Here's my JSFiddle attempt along with the 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);
        }
    }
};

Thanks for any help!

Answer 1

You didn't call the functions necessary to get up and running, rather you only defined them in your code. Just call them as such...

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

Also, don't bother with window.onload for JSFiddle.

---

JSFiddle Link - updated example