Javascript：测验程序：不加载第二个问题
[英]Javascript: Quiz program: Doesn't load the second question
问题描述
I am learning javascript and writing a Quiz program as part of learning process.
我正在学习 javascript 并编写一个测验程序作为学习过程的一部分。
<.DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form type="submit" onsubmit = "populateQuestion()"> <h2 id="question">Question goes here</h2> <input name = "option" type="radio" value="A"><span id = "choiceA">First option here</span><br/> <input name = "option" type="radio" value="B"><span id = "choiceB">Second option here</span><br/> <input name = "option" type="radio" value="C"><span id = "choiceC">Third option here</span><br/> <input name = "option" type="radio" value="D"><span id = "choiceD">Fourth option here</span><br/> <button type = "submit">Submit</button> </form> </body> <script> var question = document;getElementById("question"). var choiceA = document;getElementById("choiceA"). var choiceB = document;getElementById("choiceB"). var choiceC = document;getElementById("choiceC"). var choiceD = document;getElementById("choiceD"); var quesIndex = 0: var defQuestions = [ { question? "Q01,": choiceA, "A1": choiceB, "B1": choiceC, "C1": choiceD, "D1": answer, "A" }: { question? "Q02,": choiceA, "A2": choiceB, "B2": choiceC, "C2": choiceD, "D2": answer, "A" }: { question? "Q03,": choiceA, "A3": choiceB, "B3": choiceC, "C3": choiceD, "D3": answer, "B" }: { question? "Q04,": choiceA, "A4": choiceB, "B4": choiceC, "C4": choiceD, "D4": answer; "B" } ]. function renderQuestion() { question.innerHTML = defQuestions[quesIndex];question. choiceA.innerHTML = defQuestions[quesIndex];choiceA. choiceB.innerHTML = defQuestions[quesIndex];choiceB. choiceC.innerHTML = defQuestions[quesIndex];choiceC. choiceD.innerHTML = defQuestions[quesIndex];choiceD. } function populateQuestion() { console;log(quesIndex); renderQuestion(); quesIndex += 1; } populateQuestion(); </script> </html>
When I load the page, populateQuestion() executed and loaded the default question and options (the first element of defQuestions array).当我加载页面时， populateQuestion()执行并加载了默认问题和选项（defQuestions 数组的第一个元素）。 This part is working fine.这部分工作正常。
When I click on Submit button, the next question supposed to be loaded.当我单击Submit按钮时，应该加载下一个问题。 But the next question is not loading.但下一个问题是没有加载。
The console.log(quesIndex); console.log(quesIndex); prints only 0 and then the console window logs clearing.仅打印0 ，然后控制台 window 记录清除。
Is there anything wrong in the implementation?执行中有什么问题吗？
4 个解决方案
解决方案1
2 已采纳 2019-10-27 16:05:56
I'm not sure how you intend to process the form submission but your current implementation will submit the form thus causing the page to reload and you script to be reset.我不确定您打算如何处理表单提交，但您当前的实现将提交表单，从而导致页面重新加载并且您的脚本被重置。
You should add an event listener to capture for the form submission event and process it yourself (I expect you'll store the users given answers in an array)您应该添加一个事件侦听器来捕获表单提交事件并自己处理它（我希望您将用户给出的答案存储在一个数组中）
var question = document.getElementById("question"); var choiceA = document.getElementById("choiceA"); var choiceB = document.getElementById("choiceB"); var choiceC = document.getElementById("choiceC"); var choiceD = document.getElementById("choiceD"); var quesIndex = 0; var defQuestions = [{ question: "Q01?", choiceA: "A1", choiceB: "B1", choiceC: "C1", choiceD: "D1", answer: "A" }, { question: "Q02?", choiceA: "A2", choiceB: "B2", choiceC: "C2", choiceD: "D2", answer: "A" }, { question: "Q03?", choiceA: "A3", choiceB: "B3", choiceC: "C3", choiceD: "D3", answer: "B" }, { question: "Q04?", choiceA: "A4", choiceB: "B4", choiceC: "C4", choiceD: "D4", answer: "B" } ]; var questionnaire = document.getElementById("questionnaire"); function renderQuestion() { question.innerHTML = defQuestions[quesIndex].question; choiceA.innerHTML = defQuestions[quesIndex].choiceA; choiceB.innerHTML = defQuestions[quesIndex].choiceB; choiceC.innerHTML = defQuestions[quesIndex].choiceC; choiceD.innerHTML = defQuestions[quesIndex].choiceD; } function populateQuestion() { console.log(quesIndex); renderQuestion(); quesIndex += 1; } function onsubmit(e) { e.preventDefault(); //prevent form from actually posting var a = questionnaire.querySelector('input[name = option]:checked'); console.clear(); console.log("Q:",quesIndex,"Answer:",a.value); a.checked=false;//deselect it ready for new question populateQuestion(); } questionnaire.addEventListener('submit', onsubmit, false); populateQuestion();
form { margin-bottom:100px;/* just some space for the console log in the snippet*/ }
<form id="questionnaire" type="submit"> <h2 id="question">Question goes here</h2> <input name="option" type="radio" value="A"><span id="choiceA">First option here</span><br/> <input name="option" type="radio" value="B"><span id="choiceB">Second option here</span><br/> <input name="option" type="radio" value="C"><span id="choiceC">Third option here</span><br/> <input name="option" type="radio" value="D" required><span id="choiceD">Fourth option here</span><br/> <button type="submit">Submit</button> </form>
解决方案2
2 2019-10-27 16:21:34
If you submit a form then it's reloading the Page and start again with the first question.如果您提交表单，那么它会重新加载页面并从第一个问题重新开始。 Change this改变这个
<form type="submit" onsubmit = "populateQuestion()">
to < form type="submit">到 < form type="submit">
and <button type = "submit">Submit</button>和<button type = "submit">Submit</button>
to <button type = "button" onclick="populateQuestion()">Submit</button>到<button type = "button" onclick="populateQuestion()">Submit</button>
like this:像这样：
<form type="submit">
<h2 id="question">Question goes here</h2>
<input name = "option" type="radio" value="A"><span id = "choiceA">First option here</span><br/>
<input name = "option" type="radio" value="B"><span id = "choiceB">Second option here</span><br/>
<input name = "option" type="radio" value="C"><span id = "choiceC">Third option here</span><br/>
<input name = "option" type="radio" value="D"><span id = "choiceD">Fourth option here</span><br/>
<button type = "button" onclick="populateQuestion()">Submit</button>
</form>
解决方案3
1 2019-10-27 16:06:33
Try attaching an id to your form and an on submit event listener on the form and prevent the default behaviour of the form to keep your form from reloading the page and do your logic there.尝试将 id 附加到您的表单和表单上的 on submit 事件侦听器，并防止表单的默认行为以防止您的表单重新加载页面并在那里执行您的逻辑。
解决方案4
-1 2019-10-28 03:16:46
Here's the revised code, it works in jsfiddle.net.这是修改后的代码，它适用于 jsfiddle.net。 So, basically you'll need to update the quesIndex before rendering a new question.因此，基本上您需要在呈现新问题之前更新 quesIndex。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form type="submit" onsubmit = "populateQuestion()">
<h2 id="question">Question goes here</h2>
<input name = "option" type="radio" value="A"><span id = "choiceA">First option here</span><br/>
<input name = "option" type="radio" value="B"><span id = "choiceB">Second option here</span><br/>
<input name = "option" type="radio" value="C"><span id = "choiceC">Third option here</span><br/>
<input name = "option" type="radio" value="D"><span id = "choiceD">Fourth option here</span><br/>
<button type = "submit">Submit</button>
</form>
</body>
<script>
var question = document.getElementById("question");
var choiceA = document.getElementById("choiceA");
var choiceB = document.getElementById("choiceB");
var choiceC = document.getElementById("choiceC");
var choiceD = document.getElementById("choiceD");
var quesIndex = 0;
var defQuestions = [
{
question : "Q01?",
choiceA : "A1",
choiceB : "B1",
choiceC : "C1",
choiceD : "D1",
answer : "A"
},
{
question : "Q02?",
choiceA : "A2",
choiceB : "B2",
choiceC : "C2",
choiceD : "D2",
answer : "A"
},
{
question : "Q03?",
choiceA : "A3",
choiceB : "B3",
choiceC : "C3",
choiceD : "D3",
answer : "B"
},
{
question : "Q04?",
choiceA : "A4",
choiceB : "B4",
choiceC : "C4",
choiceD : "D4",
answer : "B"
}
];
function renderQuestion() {
question.innerHTML = defQuestions[quesIndex].question;
choiceA.innerHTML = defQuestions[quesIndex].choiceA;
choiceB.innerHTML = defQuestions[quesIndex].choiceB;
choiceC.innerHTML = defQuestions[quesIndex].choiceC;
choiceD.innerHTML = defQuestions[quesIndex].choiceD;
}
function populateQuestion() {
console.log(quesIndex);
quesIndex += 1;
renderQuestion();
}
populateQuestion();
</script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.