在学校测试我的智力竞赛应用程序时遇到问题。它设置了用于选择答案的单选按钮和一个提交按钮。当你点击提交错误的答案时，你会收到一个警告，说"不"，但当你选择正确答案时，也会收到一条"不"的警告，尽管我将"是！"设置为当你选择了正确答案时发出警告。不确定我写错了什么。。。
编辑我注意到我在下面的代码中放了.val(''(。我已经解决了这个问题，在它被指出后，我仍然得到相同的结果，将其更改为.val((
function submitAnswer() {
$('.questionBox').on('submit', function(event) {
event.preventDefault();
$('.altBox').hide();
$('.outcomeBox').show();
let selected = $('input:checked');
let answer = selected.val('');
let correct = STORE[questionNumber].correctAnswer;
if (answer == correct){
alert('Yes!');
} else {
alert('No!');
}
});
}
问题是：
let questionNumber = 0;
const STORE = [
{
title: 'What year was Donkey Kong released?',
answers: [
'1980',
'1981',
'1982',
'1983'
],
correctAnswer:
'1981'
},
我的Html/问题设置了
function createSetup(){
$('.questionBox').html(`
<form id="quiz" action='#'>
<div class="questionTitle">
<p>Question Title</p><br>
</form>
`);
};
function showQuestion(){
let question = STORE[questionNumber];
$('.questionTitle p').text(question.title);
for(var i = 0; i < question.answers.length; i++) {
$('#quiz').append(`<input type='radio' name='choices' id='${i}' required> ${question.answers[i]}<br>`)
};
$('#quiz').append(`<input type='submit'>`)
};
除了我上面的答案之外，它还直接回答了您的问题。
首先，将onclick事件从函数中删除，否则它将无法正常工作。
接下来，主要问题是无线电输入没有设置值，所以如果你真的想要一个值，你应该添加你想要的正确答案。
我在下面的代码中添加了一条注释。
祝你好运。
let questionNumber = 0;
const STORE = [
{
title: 'What year was Donkey Kong released?',
answers: [
'1980',
'1981',
'1982',
'1983'
],
correctAnswer:
'1981'
}
];
function createSetup(){
$('.questionBox').html("<form id='quiz' action='#'><div class='questionTitle'><p>Question Title</p><br></form>");
};
function showQuestion(){
let question = STORE[questionNumber];
$('.questionTitle p').text(question.title);
for(var i = 0; i < question.answers.length; i++) {
// -------------------------------------------------
// ADD A VALUE HERE BECAUSE THE RADIO HAS NO VALUE.
// value='"+question.answers[i]+"'
// ----------------------------------------------------
$('#quiz').append("<input type='radio' name='choices' id='"+i+"' value='"+question.answers[i]+"' required> "+question.answers[i]+"<br>");
};
$('#quiz').append("<input type='submit'>");
};
function submitAnswer() {
// take on click out of the function.
}
$('.questionBox').on('submit', function(event) {
event.preventDefault();
$('.altBox').hide();
$('.outcomeBox').show();
let selected = $('input:checked');
let answer = selected.val();
let correct = STORE[questionNumber].correctAnswer;
console.log(answer);
if (answer == correct){
alert('Yes!');
} else {
alert('No!');
}
});
createSetup();
showQuestion();.questionBox {
background: orange;
height: 100px;
width: 500px;
}
#quiz {
background: #CCC;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionBox">test</div>我知道这并不能具体回答你的问题，但我会这样做。
我将重点关注的主要部分是删除ID并使用类，以便您的工作更加模块化。
此外，使用数据属性可以将数据存储在几乎任何东西上。我将其用于输入，并将答案作为数据答案="AnswerValueHere">
最后，我想说的是，对于这种事情，你真的不需要使用表单，只需要使用按钮和div。使用按钮或输入不需要表单。
再说一遍，这不是每个人说的答案，而是我在这种情况下会做什么的一些暗示。上面的注释可能会解决您的特定问题，但是进行一些更改可能会防止其他问题在项目的后续发生。
祝你好运。
/* ************************** */
/* TEST DATA HERE */
/* ************************** */
const STORE = [{
title: 'What year was Donkey Kong released?',
answers: [
'1980',
'1981',
'1982',
'1983'
],
correctAnswer: '1981'
},
{title: 'What year was Pac man released?',
answers: [
'1980',
'1981',
'1982',
'1983'
],
correctAnswer: '1980'
}];
// ----------------------------------------------------------------------------------
/* ************************** */
/* SUBMIT THE ANSWER FUNCTION */
/* ************************** */
function submitAnswer(thisAnswer) {
var a = thisAnswer.closest(".quiz").find(".outcomeBox");
var questionNumber = thisAnswer.closest(".quiz").attr("data-id"); // made this local instead of global so it is more modular.
let selected = $('input:checked');
let answer = selected.attr("data-answer");
let correct = STORE[questionNumber].correctAnswer;
// clear css for outcomeBox answers
a.removeClass("correctAnswer");
a.removeClass("wrongAnswer");
if (answer == correct) {
a.addClass("correctAnswer"); // add some correct answer css
a.html("Yes, you are correct"); // add some text
a.show(); // finally show box
} else {
a.addClass("wrongAnswer"); // add some wrong answer css
a.html("No, you are wrong"); // add some text
a.show(); // finally show box
}
}
/* ************************** */
/* CREATE QUESTIONS */
/* ************************** */
function showQuestion(x) {
var question = STORE[x]; // grab the data from the questions at the x index provided in the function.
var content = ""; // setting up a content variable
// ----------------------------------------------------------------------------------
// I removed the <form> and changed to div because it makes it easier to work with.
// You do not need a form to use buttons/input and if you dont use a
// form you dont have to prevent default actions from happening.
content += "<div class='quiz' data-id='"+x+"'>";
content += "<p class='questionTitle'>"+question.title+"</p>"; // set the title
for (var i = 0; i < question.answers.length; i++) {
content += "<input type='radio' name='choices' data-answer='"
content += question.answers[i];
content += "' required> ";
content += question.answers[i];
content += "<br>";
};
content += "<button>submit</button>"; // add a button which acts like a submit.
content += "<div class='outcomeBox'>a</div>"; // moved outcome box here so is modular
content += "</div>";
// ----------------------------------------------------------------------------------
$('.questionBox').append(content); // append the content to the quiz container
};
/* ******************************* */
/* If a submit answer is clicked */
/* then check the answers. */
/* ******************************* */
$('body').on('click', ".questionBox button", function() {
var thisAnswer = $(this).closest(".quiz");
submitAnswer(thisAnswer);
});
// show the questions.
showQuestion(0);
showQuestion(1);.outcomeBox {
width: 200px;
padding: 10px;
display: none;
}
.correctAnswer {
border: 2px solid green;
color: green;
}
.wrongAnswer {
border: 2px solid red;
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionBox"></div>更改let answer = selected.val('') to let answer = selected.val();
selected.val((返回值，而selected.vl(value(设置值。