Question

我是javascript和jQuery的初学者。我正在研究基本上我的第一个javascript实验。到目前为止，我只编写代码，以便在我点击下一个或上一个时更改问题。该网页应该是一个测验，并且应该在单击按钮时动态更改问题。然而，它没有这样做，因为javascript代码可能有问题。你能帮我纠正一下吗？

使用Javascript：

var allquestions = [{
    question: "Who was the First President of the United States?", 
    choices: ["George Washington", "Thomas Jefferson", "John Adams", "Barack Obama"],
    answer: 0,
}, {
    question: "Who sanctioned the Transcontinental Railway?",
    choices: ["Thomas Jefferson", "Andrew Jackson", "Abraham Lincoln", "Dwight Eisenhower"],
    answer: 2
},
{
    question: "Who is the only president to resign in American history?",
    choices:["Richard Nixon", "Gerald Ford", "Andrew Johnson", "George H W Bush"],
    answer: 0
}];

var display = function(i){
    $('h1').append(allquestions[i].question);
    $('#quiz').append(allquestions[i].choices[0]);
    $('input[name=Option b]').append(allquestions[i].choices[1]);
    $('input[name=Option c]').append(allquestions[i].choices[2]);
    $('input[name=Option d]').append(allquestions[i].choices[3]);
};

$(document).ready(function(){
var i = 0;
display(i);
$('button[name=next]').click(function(){
    ++i;
    display(i);
});

$('button[name=prev').click(function(){
    --i;
    display(i);
});
});

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
    <h1> Le Quiz on American History </h1>
   <div id = "quiz">
     <form id = "choices">
        <input type = "radio" name="Option a" value = "0"><br>
        <input type = "radio" name="Option b" value = "1"><br>
        <input type = "radio" name="Option c" value = "2"><br>
        <input type = "radio" name="Option d" value = "3">
     </form>
   </div>
   <div id = "buttons">
   <button type = "button" name = "submit">Submit</button> <br><br>
   <button type = "button" name = "prev">Previous</button>
   <button type = "button" name = "next">Next</button>
   </div>
</body>
</html>

另外，你会怎样做得更好？您将如何为答案添加功能？请随意玩这个。感谢。

Answer 1

新的JavaScript代码适用于您的

var allquestions = [{
question: "Who was the First President of the United States?", 
choices: ["George Washington", "Thomas Jefferson", "John Adams", "Barack Obama"],
answer: 0,
}, {
question: "Who sanctioned the Transcontinental Railway?",
choices: ["Thomas Jefferson", "Andrew Jackson", "Abraham Lincoln", "Dwight Eisenhower"],
answer: 2
},
{
question: "Who is the only president to resign in American history?",
choices:["Richard Nixon", "Gerald Ford", "Andrew Johnson", "George H W Bush"],
answer: 0
}];

var display = function(i){
$('h1').html(allquestions[i].question);
$('#l1').html(allquestions[i].choices[0]);
$('#l2').html(allquestions[i].choices[1]);
$('#l3').html(allquestions[i].choices[2]);
$('#l4').html(allquestions[i].choices[3]);
};

$(document).ready(function(){
var i = 0;
display(i);
$('button[name=next]').click(function(){
++i;
display(i);
});

$('button[name=prev]').click(function(){
--i;
display(i);
});
});

Html代码

<body>
<h1> Le Quiz on American History </h1>
<div id = "quiz">
 <form id = "choices">
    <label for="a1" id="l1"></label><input id="a1" type = "radio" name="Option" value = "0"><br>
    <label for="a2" id="l2"></label><input id="a2" type = "radio" name="Option" value = "1"><br>
    <label for="a3" id="l3"></label><input id="a3"type = "radio" name="Option" value = "2"><br>
    <label for="a4" id="l4"></label><input id="a4" type = "radio" name="Option" value = "3">
 </form>
</div>
<div id = "buttons">
<button type = "button" name = "submit">Submit</button> <br><br>
<button type = "button" name = "prev">Previous</button>
<button type = "button" name = "next">Next</button>
</div>
</body>

请将jquery文件添加到您的页面。如果您有任何问题，请随时询问此代码，因为它已在我的系统上进行测试并正常工作。

Answer 2

您的网页遇到两个问题：

Prob1。你错过了添加JQuery脚本文件。

sol：添加此行

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

以上（重要）行

<script src='script.js'></script>

Prob2。无线电元素名称的语法错误。

sol :( basic）删除无线电元素名称中的空格并更改脚本中的名称。

在脚本中更改以下三行：

$('input[name=Option b]').append(allquestions[i].choices[1]);
$('input[name=Option c]').append(allquestions[i].choices[2]);
$('input[name=Option d]').append(allquestions[i].choices[3]);

到

$('input[name=Option_b]').append(allquestions[i].choices[1]);
$('input[name=Option_c]').append(allquestions[i].choices[2]);
$('input[name=Option_d]').append(allquestions[i].choices[3]);`

并在html中更改

<input type = "radio" name="Option a" value = "0"><br>
    <input type = "radio" name="Option b" value = "1"><br>
    <input type = "radio" name="Option c" value = "2"><br>
    <input type = "radio" name="Option d" value = "3">

到

<input type = "radio" name="Option_a" value = "0"><br>
    <input type = "radio" name="Option_b" value = "1"><br>
    <input type = "radio" name="Option_c" value = "2"><br>
    <input type = "radio" name="Option_d" value = "3">

基本Javascript前端代码的问题

2 个答案: