我正在使用html，javascript编写测验代码。但它不起作用

Question

我正在使用以下测验问题。问题不显示。我把我的代码放在以下链接中。

<script type="text/javascript" src="jquery.min.js"></script> 

<div id='container'> 
    <div id='title'> 
     <h1>Learning Js Properly: Project #1 - Dynamic Quiz</h1> 
    </div> 
    <br/> 
    <div id='quiz'></div> 
    <div class='button' id='next'><a href='#'>Next</a></div> 
    <div class='button' id='prev'><a href='#'>Prev</a></div> 
    <div class='button' id='start'> <a href='#'>Start Over</a></div> 
    <!-- <button class='' id='next'>Next</a></button> 
      <button class='' id='prev'>Prev</a></button> 
      <button class='' id='start'> Start Over</a></button> --> 
    </div> 

https://jsfiddle.net/Lnnqqsmj/

请纠正我在哪里，我把错误的代码。请帮我解决这个问题。

(function() { 
    var questions = [{ 
    question: "What is 2*5?", 
    choices: [2, 5, 10, 15, 20], 
    correctAnswer: 2 
    }, { 
    question: "What is 3*6?", 
    choices: [3, 6, 9, 12, 18], 
    correctAnswer: 4 
    }, { 
    question: "What is 8*9?", 
    choices: [72, 99, 108, 134, 156], 
    correctAnswer: 0 
    }, { 
    question: "What is 1*7?", 
    choices: [4, 5, 6, 7, 8], 
    correctAnswer: 3 
    }, { 
    question: "What is 8*8?", 
    choices: [20, 30, 40, 50, 64], 
    correctAnswer: 4 
    }]; 

    var questionCounter = 0; //Tracks question number 
    var selections = []; //Array containing user choices 
    var quiz = $('#quiz'); //Quiz div object 

    // Display initial question 
    displayNext(); 

    // Click handler for the 'next' button 
    $('#next').on('click', function(e) { 
    e.preventDefault(); 

    // Suspend click listener during fade animation 
    if (quiz.is(':animated')) { 
     return false; 
    } 
    choose(); 

    // If no user selection, progress is stopped 
    if (isNaN(selections[questionCounter])) { 
     alert('Please make a selection!'); 
    } else { 
     questionCounter++; 
     displayNext(); 
    } 
    }); 

    // Click handler for the 'prev' button 
    $('#prev').on('click', function(e) { 
    e.preventDefault(); 

    if (quiz.is(':animated')) { 
     return false; 
    } 
    choose(); 
    questionCounter--; 
    displayNext(); 
    }); 

    // Click handler for the 'Start Over' button 
    $('#start').on('click', function(e) { 
    e.preventDefault(); 

    if (quiz.is(':animated')) { 
     return false; 
    } 
    questionCounter = 0; 
    selections = []; 
    displayNext(); 
    $('#start').hide(); 
    }); 

    // Animates buttons on hover 
    $('.button').on('mouseenter', function() { 
    $(this).addClass('active'); 
    }); 
    $('.button').on('mouseleave', function() { 
    $(this).removeClass('active'); 
    }); 

    // Creates and returns the div that contains the questions and 
    // the answer selections 
    function createQuestionElement(index) { 
    var qElement = $('<div>', { 
     id: 'question' 
    }); 

    var header = $('<h2>Question ' + (index + 1) + ':</h2>'); 
    qElement.append(header); 

    var question = $('<p>').append(questions[index].question); 
    qElement.append(question); 

    var radioButtons = createRadios(index); 
    qElement.append(radioButtons); 

    return qElement; 
    } 

    // Creates a list of the answer choices as radio inputs 
    function createRadios(index) { 
    var radioList = $('<ul>'); 
    var item; 
    var input = ''; 
    for (var i = 0; i < questions[index].choices.length; i++) { 
     item = $('<li>'); 
     input = '<input type="radio" name="answer" value=' + i + ' />'; 
     input += questions[index].choices[i]; 
     item.append(input); 
     radioList.append(item); 
    } 
    return radioList; 
    } 

    // Reads the user selection and pushes the value to an array 
    function choose() { 
    selections[questionCounter] = +$('input[name="answer"]:checked').val(); 
    } 

    // Displays next requested element 
    function displayNext() { 
    quiz.fadeOut(function() { 
     $('#question').remove(); 

     if (questionCounter < questions.length) { 
     var nextQuestion = createQuestionElement(questionCounter); 
     quiz.append(nextQuestion).fadeIn(); 
     if (!(isNaN(selections[questionCounter]))) { 
      $('input[value=' + selections[questionCounter] + ']').prop('checked', true); 
     } 

     // Controls display of 'prev' button 
     if (questionCounter === 1) { 
      $('#prev').show(); 
     } else if (questionCounter === 0) { 

      $('#prev').hide(); 
      $('#next').show(); 
     } 
     } else { 
     var scoreElem = displayScore(); 
     quiz.append(scoreElem).fadeIn(); 
     $('#next').hide(); 
     $('#prev').hide(); 
     $('#start').show(); 
     } 
    }); 
    } 

    // Computes score and returns a paragraph element to be displayed 
    function displayScore() { 
    var score = $('<p>', { 
     id: 'question' 
    }); 

    var numCorrect = 0; 
    for (var i = 0; i < selections.length; i++) { 
     if (selections[i] === questions[i].correctAnswer) { 
     numCorrect++; 
     } 
    } 

    score.append('You got ' + numCorrect + ' questions out of ' + 
     questions.length + ' right!!!'); 
    return score; 
    } 
})(); 

Answer 1

https://jsfiddle.net/Lnnqqsmj/1/

你需要把这段代码里面$(document).ready();

您正在使用的，当它被调用运行的自执行匿名函数，但你引用的元素都没有加载到DOM，所以JS不知道它们。在尝试访问DOM元素之前等待文档完全加载。

Answer 2

你的代码工作正常。这里是jsfiddle。看来你正在写头标签内的js代码。除非你添加document.ready这会造成问题。

你仍然可以去无document .ready如果你添加结束body标签附近的脚本

<body> 
    // HTML code 
<script> 
// js code 
</script> 
</body>