时间戳

首页 > 解决方案 > 为什么我的结果总是“其他”？（测验应用程序）（jquery）

javascript - 为什么我的结果总是“其他”？（测验应用程序）（jquery）

问题描述

使用我的学校测验应用程序测试 if/else 时遇到问题。它设置有用于选择答案的单选按钮和一个提交按钮。当您在错误答案上单击提交时，您会收到“否”的警报，但当您选择正确答案时，您也会收到“否”警报，即使我设置了“是！” 当您选择正确答案时提醒。不知道我写错了什么...

编辑我注意到我把 .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'>`)
};

标签： javascriptjqueryhtml

解决方案

除了我上面的答案之外，这还直接回答了您的问题。

首先，将您的 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>

推荐阅读