Javascript不會將問題或按鈕添加到網頁

-1

我想做一個測驗網站，我用了一些簡單的互動測驗代碼，並且下一個按鈕在那裏（只有我沒有顯示設置爲無的按鈕）。 Javascript應該在打開頁面時顯示第一個問題，然後每次點擊下一個時顯示下一個問題。第一個問題後，前一個按鈕應該顯示出來，最後它會給你你的分數和重新開始按鈕。 HTML：Javascript不會將問題或按鈕添加到網頁

<!DOCTYPE html> 
<html> 
    <head> 
     <title>History</title> 
     <link rel="stylesheet" type="text/css" href="../css.css"> 
    <script src="javascript.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript" src='javascript.js'></script> 
    </head> 
    <div id="background"> 
     <div id="headnav"> 
      <h1 class="navitem">World Wide Water</h1> <!-- Going to be the header with navigatioon bar--> 
      <ul id="nav"> 
       <a href="../frontpage.html"><li class="navitem">Home</li></a> 
       <a href="about.html"><li class="navitem">About</li></a> 
       <a href="../subjects.html"><li class="navitem">Subjects</li></a> 
       <a href="share.html"><li class="navitem">Share</li></a> 
       <a href="donate.html"><li class="navitem">Donate More!</li></a> 
      </ul> 
      <div id="header"> 
       <div id="headerbar"> 
        <div id="logo"></div> 
        <div id="site-sloagan"></div> 
       </div> 
      </div> 
     </div> 
     <div id="mainhis"> 
     <p>If i do this will it work</p> 
      <div id="quiz"></div> 
      <div class='button' id='next'><a href='#'>Next</a></div> 
      <div class='button' id='prev'><a href='#'>Previous</a></div> 
      <div class='button' id='start'><a href='#'>Start Over</a></div>   
     </div> 
</div></html>

CSS：

body { 
    background-image: url("bg.jpeg"); 
    background-repeat: no-repeat; 
} 
#headnav { 
    background-color: rgb(0, 0, 153); 
    color: white; 
    } 
#main { 
    background-color: white; 
    text-align: left; 
    min-width: 900px; 
    max-width: 900px; 

} 
#nav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: center; 

} 
.navitem { 
    display: inline; 
    color: white; 
} 
.linkonsub { 
    color: black; 
} 
#id { 
    text-align: left; 
} 
#sub { 
    background-color: rgb(211, 112, 40); 
    text-align: left; 
} 
#mainhis { 
    width:50%; 
    margin:auto; 
    padding: 0 25px 40px 10px; 
    background-color: #1E90FF; 
    border:4px solid #B0E0E6; 
    border-radius:5px; 
    color: #FFFFFF; 
    font-weight: bold; 
    box-shadow: 5px 5px 5px 
    #888; 
} 
#quiz { 
    text-indent: 10px; 
    display:none; 
} 
.button { 
    border:4px solid; 
    border-radius:5px; 
    width: 40px; 
    padding-left:5px; 
    padding-right: 5px; 
    position: relative; 
    float:right; 
    background-color: #DCDCDC; 
    color: black; 
    margin: 0 2px 0 2px; 
} 
.button.active { 
    background-color: #F8F8FF 
    color: #525252; 
} 
button { 
    position: relative; 
    float: right; 
} 
.button a { 
    text-decoration: none; 
    color: black; 
} 
ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#prev { 
    display: none; 
} 
#start { 
    display: none; 
    width: 90px; 
}

的Javascript：

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

來源

2017-06-19 Matt Rodosky

你的問題是什麼？ –

對我來說很好：https://jsfiddle.net/edg5rqfo/它不適合你嗎？究竟發生了什麼？ – Clonkex

@UbiquitousDevelopers Javascript沒有輸入任何問題，所有顯示的內容都是一個小小的藍色框。 http://imgur.com/a/nuc6n < - 我看到了 –

問題很簡單。您在Javascript代碼的最開始處遺漏了$。加入並且你是黃金。爲了解釋，您可以使用美元符號作爲函數名稱。 jQuery（你正在使用）這樣做是爲了讓它非常快速和容易輸入。當您自己使用$時，它會採用一個函數作爲參數（即您傳遞迴調函數），並且該頁面加載後立即調用該回調函數。這沒什麼特別的或神奇的，它只是$()函數的作用，它是jQuery的一部分。人們使用它，因爲當頁面準備好被操縱時調用回調函數;也就是說，當所有的HTML都被生成時，它會被調用，這意味着Javascript可以安全地開始搞亂它。

所以你的代碼剛好在頁面準備好之前運行。

修復像這樣：

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

當然你的頭還應該看起來更像是這樣的：

<head> 
     <title>History</title> 
     <link rel="stylesheet" type="text/css" href="../css.css"> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript" src='javascript.js'></script> 
    </head>

來源

2017-06-19 06:33:43 Clonkex

非常感謝，現在完美工作。我更新了頭像：P –

@MattRodosky不錯，哈哈，很高興我能幫忙！通常最微小的錯誤是最難解決的，而這一個讓我撓了我的腦子很長一段時間：P – Clonkex

我相信你在這裏有兩個問題，無一不是HTML和JS負荷有關。

你兩次將您的腳本（也許複製錯誤？）和第一次添加之前，jQuery的參考，讓你的腳本失敗，因爲它加載您添加jQuery和因爲你的腳本是自執行前函數會嘗試在加載後立即運行，但會失敗，因爲它依賴的jQuery尚未加載。
您的腳本一旦加載並且不會添加正確的處理程序等，就會運行，因爲它實際上是在其他html代碼之前加載的，所以它不能將這些處理程序添加到元素中。因此，您的解決方案是使用一些主體onload掛鉤並在那裏執行init，或者將<script type="text/javascript" src='javascript.js'></script>放在頁面的底部，因此當它加載時，您可以確定其餘的HTML代碼也被加載。

來源

2017-06-19 06:16:54 Roman

這些都不是問題。在測試中，我發現一次加載腳本沒有修復它，並且他使用jQuery的ready函數，所以腳本的位置並不重要。 – Clonkex

試圖將它移到無濟於事。感謝您的幫助@Clonkex –

你需要更換你的函數「（函數（）{」與「$ （window）.on（「load」，function（）{「你的問題div在函數執行完後再加載，因此你的第一個問題沒有得到加載，希望能解決這個問題

來源

2017-06-19 08:09:09

我通過簡單地把一個$前面的「（function（）」修改爲Clonkex建議並且它工作了，我沒有由於Jquery的準備好的功能，認爲命令很重要。 –

Javascript不會將問題或按鈕添加到網頁

回答

相關問題