使用 onClick 函数验证 JavaScript 测验？

Question

我正在尝试创建一个 JavaScript 测验。 该函数将检查用户的输入值。 如果正确；它会改变问题。

具体代码见JSFiddle

可能有许多更有效和更传统的方法来实现我想要做的事情。当前的问题是函数每次运行时都会从顶部运行（显然）

function checkAnswer() {

  var question = document.getElementById("ques").innerHTML;

  var userAnswer = document.getElementById("answer").value;

  if (userAnswer === "New York City") {

    alert("correct!");
    question = "What is the best college football team?";

    if (userAnswer === "Alabama") {
      alert("Correct!");
      question = "Next question will go here and so on..."

    }
  }
}

Answer 1

我绝不会建议以这种方式做事，但这里是让你的 jsfiddle 工作的方法：

function check() {
    var question = document.getElementById('question').innerHTML
    var userAnswer = document.getElementById("answer").value;

    //Makes answer lowercase
    userAnswer = userAnswer.toLowerCase();

    //question one
    if (question === "Write One, Two, Three..") {
        if (userAnswer === "one two three") {
            alert('correct');
        }
        else {
            alert('Sorry Wrong!');
        }

        //question two  
        document.getElementById('question').innerHTML = "Write 4, 5, 6";
    }
    else {
        if (userAnswer === "4 5 6") {
            alert("correct!");
        }
        else {
            alert('Sorry Wrong!');
        }   
    }
}

做你想做的一个简单的方法是将你的问题放在一个数组中：

var QandA = [
    ["question1...", "answer1...."],
    ["question2...", "answer2...."],
    ["question3...", "answer3...."],
    ["question4...", "answer4...."]
];

function check()
{
    // No more questions?
    if (0 === QandA.length) return;

    // Check answer
    var userAnswer = document.getElementById("answer").value.toLowerCase();
    if (userAnswer === QandA[0][1]) {
        alert("Correct");
    }
    else {
        alert("Incorrect");
    }
    // Delete that question
    QandA.shift();
    // And move to next
    if (0 != QandA.length) {
        document.getElementById('question').innerHTML = QandA[0][0];
    }
}

Answer 2

如果您有很多问题需要验证，我会采用以下方法。它允许您提出任意数量的问题，而无需重复代码。

首先，将您的问题存储在一个数组中：

var arr = ["one two three", "4 5 6"];

将计数器设置为零和总计（以衡量用户性能）：

var count = 0;
var total = 0;

缓存元素：

var questionEl = document.getElementById('question');
var userAnswerEl = document.getElementById("answer");

分离出将问题写入新函数的代码。它根据计数器写出问题：

function writeQuestion() {
    if (count < arr.length) {
      questionEl.innerHTML = "Write " + arr[count];
    } else {
      alert('No more questions. You have scored ' + total);
    }
}

function check() {
    userAnswer = userAnswerEl.value.toLowerCase();   
    if (userAnswer === arr[count]) {
        alert('correct');
        count++;
        total++;
        writeQuestion();
    } else {
        alert('Sorry Wrong!');
        count++;
        writeQuestion();
    }
}

DEMO

Answer 3

if (userAnswer === "New York City") {

  alert("correct!");
  question = "What is the best college football team?";

  if (userAnswer === "Alabama") {
    alert("Correct!");
    question = "Next question will go here and so on..."

  }
}

这个块只在userAnswer 是"New York City" 时运行，但是在里面，你测试userAnswer 是否是"Alabama" - 那永远不会是真的。您可能希望将第二个 if 移到第一个 if 块之外。

您似乎正在分配给question，但没有使用该值。如果您认为通过为question 分配一个值来更新问题文本，这是行不通的。我认为您正在尝试这样做：

question = document.getElementById("ques");

// later on...
question.innerHTML = "this is another question";

// even later...
question.innerHTML = "and here is a new question";

这将为您更新页面，因为 question 将指向一个 DOM 节点，您可以在其上设置 .innerHTML，但是您编写它的方式，您最初将 question 设置为字符串值，然后是其他字符串值，但无论如何都不使用它们中的任何一个。