Question

由于某些原因，程序运行时，div标签不会显示在网页中。我测试了所有其他组件，并发现问题是div标签的值设置在if语句中。唯一的问题是我不知道如何解决问题，仍然让程序以我想要的方式运行。

<div id="answerDisplay"></div>
<div id="correctOrNot"></div>

<script>
var div
var div2
var rightAnswer
var problemNum =Math.floor((Math.random() * 3) + 1);
if (problemNum == 1){
rightAnswer = 14;
div = document.getElementById("answerDisplay");
div.textContent = "4 + 2 * (10 - 3 * 2) / 4 + 8 = ?";


}
else if (problemNum == 2){
rightAnswer = 8;
    div = document.getElementById("answerDisplay");
div.textContent = "(6 - 3) * 2 + (3^2 - 5) / 2 = ?";

}
else if (problemNum == 3){
rightAnswer = 6;
    div = document.getElementById("answerDisplay");
div.textContent = "5 - 3 + 4^2 / (8 - 4 / 2) = ?";

}
else if (problemNum == 4){
rightAnswer = 3;
    div = document.getElementById("answerDisplay");
div.textContent = "5^2 - (6 * 2) * 2 * (5 - 2) = ?";

}

function checkRightAnswer (){
var answer = document.getElementById('Input').value
if (problemNum == 1 && answer == 14){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else if (problemNum == 2 && answer == 8){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else if (problemNum == 3 && answer == 6){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else if (problemNum == 4 && answer == 3){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else {
div2 = document.getElementById("correctOrNot");
div2.textContent = "Incorrect, try again";

}
}



</script>

Answer 1

您的代码似乎运行正常。我没有看到您提供的代码段中包含输入容器。也许你需要确保id在那里是正确的？我稍微清理了一下代码：

var div, div2, rightAnswer, problemNum = Math.floor((Math.random() * 3) + 1);
if (problemNum === 1) {
    rightAnswer = 14;
    div = document.getElementById("answerDisplay");
    div.textContent = "4 + 2 * (10 - 3 * 2) / 4 + 8 = ?";
} else if (problemNum === 2) {
    rightAnswer = 8;
    div = document.getElementById("answerDisplay");
    div.textContent = "(6 - 3) * 2 + (3^2 - 5) / 2 = ?";
} else if (problemNum === 3) {
    rightAnswer = 6;
    div = document.getElementById("answerDisplay");
    div.textContent = "5 - 3 + 4^2 / (8 - 4 / 2) = ?";
} else if (problemNum === 4) {
    rightAnswer = 3;
    div = document.getElementById("answerDisplay");
    div.textContent = "5^2 - (6 * 2) * 2 * (5 - 2) = ?";
}

function checkRightAnswer() {
    var answer = document.getElementById('Input').value;
    if (problemNum === 1 && answer === 14) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else if (problemNum === 2 && answer === 8) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else if (problemNum === 3 && answer === 6) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else if (problemNum === 4 && answer === 3) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Incorrect, try again";
    }
}

<div id="answerDisplay"></div>
<div id="correctOrNot"></div>
<input type="text" id="Input" />

Answer 2

以下是一种方法，你可以像ErikE在评论中所建议的那样重写它以使用一组对象。

var questions = [
    {
      q: "4 + 2 * (10 - 3 * 2) / 4 + 8 = ?",
      a: 14
    },
    {
      q: "(6 - 3) * 2 + (3^2 - 5) / 2 = ?",
      a: 8
    },
    {
      q: "5 - 3 + 4^2 / (8 - 4 / 2) = ?",
      a: 6
    },
    {
      q: "5^2 - (6 * 2) * 2 * (5 - 2) = ?",
      a: 3
    }
  ],
  currentQuestion, // the index of the current question will
                   // be stored here so we can look up the answer later
  timerId,
  doc = document,
  elQuestion = doc.getElementById('question')
  elAnswer = doc.getElementById('answer'),
  elUserAnswer = doc.getElementById('user-answer'),
  elCheck = doc.getElementById('check'),

  displayQuestion = function (index) {
    currentQuestion = index;
    elQuestion.textContent = questions[index].q;
  },
  displayRandomQuestion = function () {
    displayQuestion(Math.floor(Math.random() * questions.length));
  },
  removeAnswer = function () {
    timerId = setTimeout(function () {
      elAnswer.textContent = ''
    }, 1000);
  },
  checkAnswer = function () {
    var userAnswer = elUserAnswer.value;

    clearTimeout(timerId);

    // the '' + explicitly converts the .a to a string because userAnswer will be a string
    // using the strict comparison operator (===) is a good habit to get into
    if (userAnswer === '' + questions[currentQuestion].a) { 
      elAnswer.textContent = 'Correct!';
      displayRandomQuestion();
    } else {
      elAnswer.textContent = 'Incorrect, try again';
    }
    removeAnswer();
  };

elCheck.addEventListener('click', checkAnswer, false);
displayRandomQuestion();

工作jsfiddle

这样做更短，更清洁，也更容易维护。添加新的问题/答案对就像向阵列添加另一个对象一样简单。不再复制/粘贴if语句和其他冗余代码。此外，因为只有一个地方执行每个动作（显示问题/答案，检查答案等）如果有任何这些功能的错误，有一个明确定义的地方来查找错误和对于测验中的每个问题，你只需要修改一次而不是一次。

我抽象大量工作的方式也使得将来扩展代码变得更容易。例如，如果你进一步抽象出随机数码：

getRandomIndex = function () {
  return Math.floor(Math.random() * questions.length);
},

您可以更改displayRandomQuestion，以便它不会连续两次重复相同的问题：

  displayRandomQuestion = function () {
    var index;
    do {
      index = getRandomIndex();
    } while (index === currentIndex);
    displayQuestion(index);
  },

甚至在问到所有问题之前，确保问题永远不会重复：

  askedIndexes = [],
  displayRandomQuestion = function () {
    var index;
    do {
      index = getRandomIndex();
    } while (askedIndexes.indexOf(index) !== -1);
    if (askedIndexes.length === questions.length - 1) {
      askedIndexes = [];
    }
    askedIndexes.push(index);
    displayQuestion(index);
  },

div里面if语句javascript

2 个答案: