Question

所以我正在尝试按照this blog post（codepen example）的代码构建测验应用。

我已经完成了所有工作，但JS似乎没有工作，因为没有任何问题或答案或任何显示，除了HTML和CSS。 Here's my JSFiddle attempt以及代码

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);
        }
    }
};

感谢您的帮助！

Answer 1

您没有调用启动和运行所需的功能，而只是在代码中定义它们。只需称它们为......

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

此外，不要为JSFiddle {/ 1}}而烦恼。

JSFiddle Link - 更新了示例

Javascript无法在应用上运行

1 个答案: