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不会将问题或按钮添加到网页

回答

相关问题