Question

我正在尝试用HTML和JavaScript进行简单的代数测验，但无法弄清楚如何让它显示出正确的答案数量。我把它转到了将正确的答案变量转换为布尔值的地方，true是正确的，false是不正确的。然后我做了if和else语句，看看有多少答案是正确的，但警报（将被更改）只是显示零，无论如何。这是我的代码的链接。 https://jsbin.com/yivapi/edit?,js

Answer 1

Trenner，我在没有解开你的代码的情况下无法正确回答你的问题，所以我认为我所做的就是向你展示一种不同的（并且希望更容易）解决问题的方法。我希望没关系。

<强> HTML

以下是问题的输入，因为我认为你已将它们排除在外。为简单起见，我这里只使用了三个。我有一个提交按钮，我马上就可以了。

<input id="q1" />
<input id="q2" />
<input id="q3" />
<button id="submit">Submit</button>

<强>的JavaScript

首先，我们抓住提交按钮并为其点击事件分配一个函数getAnswers。

var submit = document.getElementById('submit');
submit.onclick = getAnswers;

这是一个获取输入值的快捷功能，因此您不需要在以后继续写document.getElementById(id).value。

function getValue(id) {
    return document.getElementById(id).value;
}

行。所以现在，我们不再使用if...else语句加载，而是使用对象来存储我们的所有信息。如果您使用过其他语言，他们可能会将这样的内容称为哈希映射。基本上它是具有键/值对的信息存储，并且它非常适合将连接的信息存储在一起。在这种情况下，每个问题都是一个键，它有另一个对象作为其值，该对象的键是value和answer，它的值是输入的值元素和实际答案。

function getAnswers() {

    // create the object
    var quiz = {};

    // for each question assign set up a new key (question1)
    // and get the input value using our shortcut function.
    // We set the actual answer here too.
    quiz.question1 = { value: getValue('q1'), answer: '2√19' }
    quiz.question2 = { value: getValue('q2'), answer: '√87' }
    quiz.question3 = { value: getValue('q3'), answer: '8x√2' }

    // Once we've loaded the questions, we can check the answers
    // We pass in our quiz object as an argument
    checkAnswers(quiz);
}

这里我们使用循环来迭代我们的测验对象。一个简单的7行循环，而不是所有那些可怕的if...else语句。

function checkAnswers(quiz) {

    // set up out correctAnswers variable
    var correctAnswers = 0;

    // loop over the quiz object and...
    for (var q in quiz) {

        // ...for each question we test the input value we've stored
        // against the answer also held in that object
        // If they match increase the correctAnswers variable
        if (quiz[q].value === quiz[q].answer) {
            correctAnswers++;
        }
    }

    // finally alert the correctAnswers
    alert("You got " + correctAnswers + " out of 15 questions right!");
}

This DEMO会显示正常工作的代码。只需将2√19添加到第一个输入框并按提交，您将收到1个正确答案的提醒。

很抱歉没有直接回答您的问题，但我希望您觉得此代码很有趣且有用。祝你的JavaScript编码好运。

如何让它显示用户正确的问题？

1 个答案: