JS多项选择游戏无法检测到正确答案

我正在用JavaScript构建这个多项选择游戏。规则相当简单;用户被问到数字 1 + 数字 2 等于什么，并且有 4 个不同的答案可供选择（一个是正确的）。

然而，出于某种原因，在我的代码中，无论我选择什么答案（即使它是错误的），游戏总是告诉我我选择了正确的答案。

这是我的代码：

var num1 = Math.floor((Math.random() * 30) + 10);
var num2 = Math.floor((Math.random() * 30) + 10);
var result = num1 + num2;
document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('field1').innerHTML = num1;
    document.getElementById('field2').innerHTML = num2;
    var opts = [];
    for(var i=0;i<3;i++){
      opts.push(findRandom(result,opts));
    }  
    opts.push(result);
    opts.sort();  
    for(var i=1;i<5;i++){ 
     document.getElementById('option'+i).innerHTML = opts[i-1];
    }  
  console.log(opts);
});
function findRandom(n,opts){
  var result = 0;
  while(result !=n && result == 0){
    result = Math.floor(Math.random() * (n + 1)); 
    if(opts.indexOf(result) >0){
      result = 0;
    }
  }
  return result;
}
var choices = document.querySelectorAll('.field-block');
[].slice.call(choices).forEach(function(choice){
   choice.addEventListener('click', function(){
      getChoice(choice);
   });
});
function getChoice(){
  if(choices.innerHTML = result){
    after.classList.remove('hide');
    after.classList.add('correct');
    after.innerHTML = 'Good job :) !';
  } else{
    after.classList.remove('hide');
    after.classList.add('wrong');
    after.innerHTML = "Wrong answer :( Try again !";
  }
}

这是我的代码笔：https://codepen.io/teenicarus/pen/Oxaaoe

自己尝试一下，您会立即看到问题。

我该如何解决这个问题？

我感谢所有回复

有几个问题。首先，您需要使用传递给 getChoice() 函数的参数，因为它包含选定的choice。 choices是可用选项的数组。

其次，=是为了价值分配。这就是为什么你总是有一个成功的结果。比较值时，需要使用==或===。试试这个：

var num1 = Math.floor((Math.random() * 30) + 10);
var num2 = Math.floor((Math.random() * 30) + 10);
var result = num1 + num2;
document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById('field1').innerHTML = num1;
  document.getElementById('field2').innerHTML = num2;
  var opts = [];
  for (var i = 0; i < 3; i++) {
    opts.push(findRandom(result, opts));
  }
  opts.push(result);
  opts.sort();
  for (var i = 1; i < 5; i++) {
    document.getElementById('option' + i).innerHTML = opts[i - 1];
  }
});
function findRandom(n, opts) {
  var result = 0;
  while (result != n && result == 0) {
    result = Math.floor(Math.random() * (n + 1));
    if (opts.indexOf(result) > 0) {
      result = 0;
    }
  }
  return result;
}
var choices = document.querySelectorAll('.field-block');
[].slice.call(choices).forEach(function(choice) {
  choice.addEventListener('click', function() {
    getChoice(choice);
  });
});
function getChoice(choice) {
  if (choice.innerHTML == result) {
    after.classList.remove('hide');
    after.classList.add('correct');
    after.innerHTML = 'Good job :) !';
  } else {
    after.classList.remove('hide');
    after.classList.add('wrong');
    after.innerHTML = "Wrong answer :( Try again !";
  }
}

.App {
  text-align: center;
}
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 60px;
}
.App-header {
  background-color: #222;
  height: 180px;
  padding: 20px;
  color: white;
}
.App-intro {
  font-size: large;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.text-info {
  color: #fff;
  font-weight: bold;
  font-size: 2.1rem;
}
.question {
  font-size: 2rem;
}
.options {
  margin: 5%;
  display: flex;
  margin-right: -12px;
  margin-left: -12px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  flex: 1 0 auto;
}
.fields {
  display: flex;
  padding: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex: 1;
}
.field-block {
  display: flex;
  min-height: 160px;
  padding: 10%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex: 1 0 auto;*/
  border-radius: 4px;
  background-color: #f9bad0;
  font-size: 6rem;
  color: #fff;
  cursor: pointer;
}
.quiz {
  color: #ddd;
  margin: 2%;
  background-color: #ec1561;
  padding: 2%;
  width: 90%;
  position: relative;
}
.button {
  display: flex;
  height: 48px;
  padding-right: 16px;
  padding-left: 16px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 4px;
  background-color: #2fcaaa;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 2px 12px 0 rgba(0, 0, 0, .1);
  transition: box-shadow 200ms ease-out;
  color: #fff;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.quiz .after {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 80%;
  /*display: none;*/
  color: #FFF;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  opacity: 0.8;
  font-size: 3rem;
}
.correct {
  background-color: green;
}
.wrong {
  background-color: #D91E18;
}
.hide {
  display: none !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<a href="https://happy-learning.herokuapp.com/ " target="_blank"><img alt="Join Slack" height="40" width="139" src="http://i.imgur.com/0Lne5Vr.png" /></a>
<div>
  <h1>Adding Game</h1>
  <p id="demo">In this lecture, we will cover the game to add 2 numbers.</p>
</div>
<hr>
<div class="quiz">
  <div class="quiz-content">
    <div class="question">
      What is the sum of <span class="text-info" id="field1">5</span> and <span class="text-info" id="field2">5</span>?
    </div>
    <div class="options">
      <div class="fields animated zoomIn">
        <div class="field-block" id='option1'>
          <li>10</li>
        </div>
      </div>
      <div class="fields animated zoomIn">
        <div class="field-block" id="option2">
          <li>10</li>
        </div>
      </div>
      <div class="fields animated zoomIn">
        <div class="field-block" id="option3">
          <li>10</li>
        </div>
      </div>
      <div class="fields animated zoomIn">
        <div class="field-block" id="option4">
          <li>10</li>
        </div>
      </div>
    </div>
    <div class="after hide" id="after">
    </div>
    <div class="play-again">
      <a class="button" onClick="window.location.href=window.location.href">Play Again</a>
    </div>
  </div>
</div>

我还没有完全完成这个例子，但它可能是这样的：

if(choices.innerHTML = result){

您正在分配结果而不是测试它，因此结果始终为真。

此外，您没有传递选择：

function getChoice(){

尝试

function getChoice(choices){

你有两个错误。首先：你在事件处理程序中使用 param 调用 getChoice()，但你的函数不接受任何参数。第二：在你的getChoice中，你不是在比较，而是在分配（=不是==）。

我修复了你的代码笔：https://codepen.io/anon/pen/mBvpvb

相关内容

最新更新

热门标签：