JavaScript 小测验用 onClick 函数验证？

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

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 设置为一个字符串值，然后再设置其他字符串值，但无论如何都不使用它们中的任何一个。

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

我绝不建议以这种方式做事，但这里是让你的 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];
    }
}

JavaScript 小测验用 onClick 函数验证？

JavaScript Quiz Validating with onClick Function?

javascript

if-statement

function

switch-statement

JavaScript 小测验 用 onClick 函数验证？

JavaScript Quiz Validating with onClick Function?

javascript

if-statement

function

switch-statement

JavaScript 小测验用 onClick 函数验证？