我正在做一个问答应用程序，基本上将从API获取问题和答案，并将其显示到网页上。它工作得很好，但错误处理不起作用。我有一个if...else语句，它将检查用户是否选择了正确的答案，如果选择了，播放一个声音并向用户显示“Nice Job”。如果他们没有，然后告诉用户他们需要再试一次。我的行为很奇怪。有时当我选择了正确的答案，它说它是不正确的。当答案中有空格时就会发生这种情况。对于单个单词，如“true”、“false”或“hello”，效果很好。我将答案记录到控制台，它存储在一个名为answer_container的变量中，当我将其记录到控制台时，答案和我的选择完全相同。我尝试使用===和==运算符来查看是否可行，但结果是一样的。我已经发布了完整的代码，包括我的HTML，这样你就可以看到它正在发生什么。注意，我花了几次努力才显示出奇怪的行为。

以下是我尝试的内容:

顺晟科技：

您正在使用表达式来确定所选答案是否正确。

来自所选选项的属性。但是，当应答值包含空格时，HTML只将第一个空格解释为“值”。当像上来这样的答案时，'s属性仅为。

在HTML中生成您的代码时，需要正确地将它们封装在双引号中，如下所示:

var showAnswer = document.getElementById('showAnswer');
var button_score = document.getElementById('ShowScore');
var answer_container;
var url = 'https://opentdb.com/api.php?amount=1';
var score = 0;
var html_container = [];
async function fetchData() {
  document.getElementById('next').disabled = true;
  document.getElementById('msgSuccess').innerHTML = '';
  document.getElementById('check').disabled = false;
  document.getElementById('showAnswer').disabled = false;
  var getData = await fetch(url);
  var toJS = await getData.json();
  answer_container = toJS.results[0].correct_answer;
  var container = [];
  for (var i = 0; i < toJS.results[0].incorrect_answers.length; i++) {
    container.push(toJS.results[0].incorrect_answers[i]);
  }
  container.push(toJS.results[0].correct_answer);
  container.sort(func);

  function func(a, b) {
    return 0.5 - Math.random();
  }
  html_container = [];
  container.forEach(function(choices) {
    html_container.push(`
<option value=${choices}>
${choices}
</option>
`)
  });
  document.getElementById('choice').innerHTML = html_container.join();
  if (toJS.results[0].type === 'boolean') {
    document.getElementById('type').innerHTML =
      `This question is a ${toJS.results[0].category} question <br>
It is a true/false question<br>
Difficulty level: ${toJS.results[0].difficulty} <br>
Question: ${toJS.results[0].question}<br>
`;
  } else {
    document.getElementById('type').innerHTML =
      `This question is a ${toJS.results[0].category} question <br>
It is a ${toJS.results[0].type} choice question <br>
Difficulty level: ${toJS.results[0].difficulty} <br>
Question: ${toJS.results[0].question}<br>
`;
  }
}
fetchData();
showAnswer.addEventListener('click', function() {
  document.getElementById('answer_element').innerHTML = "The answer to this question is " + answer_container;
  document.getElementById('answer_element').style.display = "block";
  setTimeout(function() {
    document.getElementById('answer_element').style.display = "none";
  }, 3000);
});

function check() {
  var select_answer = document.getElementById('choice').value;
  var audio = document.getElementById('audio');
  if (select_answer == answer_container) {
    score++;
    document.getElementById('showAnswer').disabled = true;
    document.getElementById('msgSuccess').innerHTML = "Nice job, keep going!";
    document.getElementById('next').disabled = false;
    document.getElementById('check').disabled = true;
    audio.play();
    console.log(answer_container);
  }
  if (select_answer != answer_container) {
    score--;
    document.getElementById('msgSuccess').innerHTML = "Keep trying, you will get it!";
    document.getElementById('next').disabled = true;
    console.log(answer_container);
  }
}

切线，但如果使用和生成元素，可能会更干净；在本例中，正确设置每个属性所需的引号将在为您添加。

不错的游戏！

这里的问题是HTML中的文本在空格上被截断，因此您要比较的值也不匹配。

在HTML选项中需要引号以保留空白。

var showAnswer = document.getElementById('showAnswer');
var button_score = document.getElementById('ShowScore');
var answer_container;
var url = 'https://opentdb.com/api.php?amount=1';
var score = 0;
var html_container = [];
async function fetchData() {
  document.getElementById('next').disabled = true;
  document.getElementById('msgSuccess').innerHTML = '';
  document.getElementById('check').disabled = false;
  document.getElementById('showAnswer').disabled = false;
  var getData = await fetch(url);
  var toJS = await getData.json();
  answer_container = toJS.results[0].correct_answer;
  var container = [];
  for (var i = 0; i < toJS.results[0].incorrect_answers.length; i++) {
    container.push(toJS.results[0].incorrect_answers[i]);
  }
  container.push(toJS.results[0].correct_answer);
  container.sort(func);

  function func(a, b) {
    return 0.5 - Math.random();
  }
  html_container = [];
  container.forEach(function(choices) {
    html_container.push(`
<option value=${choices}>
${choices}
</option>
`)
  });
  document.getElementById('choice').innerHTML = html_container.join();
  if (toJS.results[0].type === 'boolean') {
    document.getElementById('type').innerHTML =
      `This question is a ${toJS.results[0].category} question <br>
It is a true/false question<br>
Difficulty level: ${toJS.results[0].difficulty} <br>
Question: ${toJS.results[0].question}<br>
`;
  } else {
    document.getElementById('type').innerHTML =
      `This question is a ${toJS.results[0].category} question <br>
It is a ${toJS.results[0].type} choice question <br>
Difficulty level: ${toJS.results[0].difficulty} <br>
Question: ${toJS.results[0].question}<br>
`;
  }
}
fetchData();
showAnswer.addEventListener('click', function() {
  document.getElementById('answer_element').innerHTML = "The answer to this question is " + answer_container;
  document.getElementById('answer_element').style.display = "block";
  setTimeout(function() {
    document.getElementById('answer_element').style.display = "none";
  }, 3000);
});

function check() {
  var select_answer = document.getElementById('choice').value;
  var audio = document.getElementById('audio');
  if (select_answer == answer_container) {
    score++;
    document.getElementById('showAnswer').disabled = true;
    document.getElementById('msgSuccess').innerHTML = "Nice job, keep going!";
    document.getElementById('next').disabled = false;
    document.getElementById('check').disabled = true;
    audio.play();
    console.log(answer_container);
  }
  if (select_answer != answer_container) {
    score--;
    document.getElementById('msgSuccess').innerHTML = "Keep trying, you will get it!";
    document.getElementById('next').disabled = true;
    console.log(answer_container);
  }
}