第一張圖片加載時尚未加載

Question

我正在製作一個簡單的測驗應用程序。我正在使用JQuery，但我的第一個問題是沒有加載頁面加載。但是，如果我點擊清除（重置）按鈕，那麼它加載頁面罰款。

//On Submit Button 
    $("button#answer").on("click",function(){ 
    checkAnswer(); 
    questionNumber++; 

    if(questionNumber === questions.length){ 
     $(this).css("display","none"); 
     $("#clear").css("display","block"); 
    } 
    else { 
     nextQuestion(); 
    }; 
    }); 

全部工作的代碼是在這裏這個JS小提琴 - http://jsfiddle.net/dQgbs/

我沒有我的圖片加載到不甘示弱，但是當你運行它，你只看到按鈕，你會看到，但是當你點擊答案按鈕，你會得到第二個問題。

Answer 1

嘗試在文件準備

這裏呼籲nextQuestion();是demo

Answer 2

嘿，我在這樣的代碼做了一些修改。

在HTML代碼我增加一個按鈕 - 開始

<nav class="nav-bar"> 
    <div class="nav-hold"> <a href="#" class="nav-logo">Qu<span id="blink">:</span>z Time - Guess this person</a> 
<a href="#" class="nav-status" id="quiz_status"></a> 

    </div> 
</nav> 
<div class="wrap_container"> 
    <div class="firstContainer"> 
     <img id="question_image" src="" alt="" /> 
    </div> 
    <div class="secondContainer"> 
     <div class="answers"></div> 
    </div> 
    <div class="action"> 
     <button id="answer">Answer</button> 
     <button id="start">Start</button> 
     <button id="clear">Clear</button> 
    </div> 
</div> 

在css--

#start{ 
    margin-left:50%; 
    } 

在script--

$(document).ready(function() { 

    $("button#answer").css("display", "none"); 
    $("button#clear").css("display","none"); 
    //Global Variables 

    var questionNumber = 0, 
     correctAnswers = 0, 
     counter = 0, 
     userAnswers = new Array(), 

     questions = [{ 

      question: "Images/img1.jpg", 
      choices: ["img1", "img2", "img3", "img4", "img5"], 
      quesNum: 1, 
      correctAns: 0 
     }, 

     { 
      question: "Images/img2.jpg", 
      choices: ["img1", "img2", "img3", "img4", "img5"], 
      quesNum: 2, 
      correctAns: 1 
     }, 

     { 
      question: "Images/img3.jpg", 
      choices: ["img1", "img2", "img3", "img4", "img5"], 
      quesNum: 3, 
      correctAns: 3 
     }, 

     { 
      question: "Images/img4.jpg", 
      choices: ["img1", "img2", "img3", "img4", "img5"], 
      quesNum: 4, 
      correctAns: 2 
     }, 

     { 
      question: "Images/img5.jpg", 
      choices: ["img1", "img2", "img3", "img4", "img5"], 
      quesNum: 5, 
      correctAns: 4 
     }]; 

    //Question Number 
    $("#quiz_status").text("Question " + questions[0].quesNum + " of " + questions.length); 


/**********my code**************/ 

$("button#start").on("click", function(){ 

    $("button#answer").css("display","block"); 
    $("button#clear").css("display","block"); 
    $("button#start").css("display","none"); 
    checkAnswer(); 
    if (questionNumber === questions.length) { 
      $(this).css("display", "none"); 
      $("#clear").css("display", "block"); 
     } else { 
      nextQuestion(); 
     }; 

    }); 
/**********my code**************/ 
    //On Submit Button 
    $("button#answer").on("click", function() { 
        alert("second"); 
     checkAnswer(); 

     questionNumber++; 
     if (questionNumber === questions.length) { 
      $(this).css("display", "none"); 
      $("#clear").css("display", "block"); 
     } else { 
      nextQuestion(); 
     }; 

    }); 

    //On Clear Quiz Button 
    $("button#clear").on("click", function() { 
     restart(); 
     nextQuestion(); 
    }); 

    //Move to next question - update question & answers 
    function nextQuestion() { 
     $("#quiz_status").text("Question " + questions[questionNumber].quesNum + " of " + questions.length); 
     $("#question_image").attr({ 
      src: questions[questionNumber].question, 
      alt: 'Picture' 
     }).height(200).width(200); 

     var multChoice = $.each(questions[questionNumber].choices, function (index, value) { 
      value 
     }); 
     $("div.answers label").remove(); 
     $.each(multChoice, function (index, value) { 
      $("div.answers").append("<label class='radio'><input type='radio' name='check' data-ans=" + index + ">" + value + "</label>"); 
     }); 
    } 

    //Check user answer against correct answer - store user answer & keep count for right or wrong answers 
    function checkAnswer() { 

     var userAns = $("input[type=radio]:checked").data("ans"); 

     userAnswers.push(userAns); 

     if (userAns === questions[counter].correctAns) { 
      correctAnswers++; 
     } 
     counter++; 
    } 

    $(correctAnswers).appendTo('quiz_status'); 

    //Restart Quiz 
    function restart() { 
     questionNumber = 0; 
     correctAnswers = 0; 
     counter = 0; 
     userAnswers = new Array(); 
     $("#answer").css("display", "block"); 
     $("#clear").css("display", "none"); 
    } 

    // Function to create a BLINK TEXT effect 
    function blink(selector) { 
     $(selector).animate({ 
      opacity: 0 
     }, 50, "linear", function() { 
      $(this).delay(800); 
      $(this).animate({ 
       opacity: 1 
      }, 50, function() { 
       blink(this); 
      }); 
      $(this).delay(800); 
     }); 
    } 
    blink("a #blink"); //Call blink text function 

}); 

See demo