如果陈述有效,为什么我不会

时间:2018-01-06 21:19:06

标签: javascript html

大家好我不知道为什么我的其他if语句不起作用,因为我打算让它们单击按钮运行,而其他每个问题都会运行,直到其中一个为真,并返回'正确'或'错误'的方框。我的其他if语句是否正确调用?如果是这样,我正确指的是'correctAnswer'吗?在此先感谢!:)(哦,顺便说一下'错误'和'正确'div的显示样式在外部CSS样式表中设置为'none')

Javascript:

var gameOn = false;
var score;
var interval;
Array.prototype.shuffle = function(){
            var i = this.length, j, temp;
            while(--i > 0){
                j = Math.floor(Math.random() * (i+1));
                temp = this[j];
                this[j] = this[i];
                this[i] = temp;  
              }//while loop bracket
            return this;
        }

function stopGame() {
  gameOn = false;
  if (interval) {
    clearInterval(interval);
    interval = null;
  }//if interval bracket
  document.getElementById("startreset").innerHTML = "Start Game";
  document.getElementById("time-remaining").style.display = "";
}//function stopGame bracket


//if we click on the start/reset
document.getElementById("startreset").onclick = function () {

  //if we are not playing
  if (gameOn) {
    stopGame();
  }/*if gameOn bracket*/ else {

      //change mode to playing
    gameOn = true;

    //set score to 0
    score = 0;

    document.getElementById("scorevalue").innerHTML = score;

    //show countdown box
    document.getElementById("time-remaining").style.display = "block";
    document.getElementById("startreset").innerHTML = "Reset Game";

    var counter = 60;

    //reduce time by 1sec in loops
    interval = setInterval(timeIt, 1000);
    function timeIt(){
      document.getElementById("timer-down").innerHTML = counter;
      counter--;

        //timeleft?
        //no->gameover
        if ( counter === 0) {
        stopGame();
        document.getElementById("game-over").style.display = "block";
        document.getElementById("game-over").innerHTML = "Game Over" + "<br />" + "<br />" + "Your Score is " + score + "!";

        }//if counter bracket
    }//timeIt function bracket

      //generate new Q&A
      generateQA();
      function generateQA(){
        //this is the first number in the equation  
        var Na = 1+ Math.round(Math.random() * 9);
        //this is the second number in the equation   
        var Nb  = 1+ Math.round(Math.random() * 9);
        //the correct answer is when you multiply both together  
        correctAnswer = Na * Nb;
        //these are the randomly generated wrong answers  
        var w1 = 1+ Math.round(Math.random() * 16);
        var w3 = 1+ Math.round(Math.random() * 22);
        var w4 = 1+ Math.round(Math.random() * 92);  
        document.getElementById("question").innerHTML = Na + "x" + Nb;
        console.log(correctAnswer);

        var myArray = [w1, correctAnswer, w3, w4];
        var result = myArray.shuffle();

        document.getElementById("box1").innerHTML = result[0];
        document.getElementById("box2").innerHTML = result[1];
        document.getElementById("box3").innerHTML = result[2];
        document.getElementById("box4").innerHTML = result[3];

        }//generateQA function bracket

        function evaluateAnswer(){
            var a = document.getElementById("correct");
            var b = document.getElementById("wrong");
            if ('box1' === correctAnswer){
                a.style.diplay = 'block';
                generateQA();
            }else if('box1' !== correctAnswer){
                b.style.diplay = 'block';
            }else if('box2' === correctAnswer){
                a.style.diplay = 'block';
                generateQA();
            }else if('box2' !== correctAnswer){
                b.style.diplay = 'block';
            }else if('box3' === correctAnswer){
                a.style.diplay = 'block';
                generateQA();
            }else if('box3' !== correctAnswer){
                b.style.diplay = 'block';
            }else if('box4' === correctAnswer){
                a.style.diplay = 'block';
                generateQA();
            }else if('box4' !== correctAnswer){
                b.style.diplay = 'block';
            }
          }//evaluateAnswer function bracket

    }//else statement bracket
}//startreset button function bracket

HTML:

<div id="correct">
Correct!
            </div>
            <div id="wrong">
                Try Again
            </div>
            <div id="question">
                <span id="firstInt"></span><span id="secondInt"></span>
            </div>
            <div id="instruction">
                Click on the Correct Answer
            </div>
            <div id="choices">
                <div id="box1" onclick = "evaluateAnswer()" class="boxes"></div>
                <div id="box2" onclick = "evaluateAnswer()" class="boxes"></div>
                <div id="box3" onclick = "evaluateAnswer()" class="boxes"></div>
                <div id="box4" onclick = "evaluateAnswer()" class="boxes"></div>
            </div>
            <div id="startreset">
                Start Game
            </div>

2 个答案:

答案 0 :(得分:1)

除了对你的问题的评论之外,你的逻辑也被打破了。

&#13;
&#13;
if ('box1' === correctAnswer()){
  a.style.diplay = 'block';
  generateQA();
}else if('box1' !== correctAnswer()){
  b.style.diplay = 'block';
}
&#13;
&#13;
&#13;

您的第一个if和第二个if是互斥的,这意味着这两个中的一个将永远为真。所有其他else操作都不会执行。

更新 - 包含基于您最新评论的更改。

由于您只是想表明答案是否正确,请尝试以下方法:

您需要将result的位置移至全局:

var result = [];

如果结果是全局变量,那么您可以将代码的其余部分更改为:

&#13;
&#13;
function evaluateAnswer(box){
  var a = document.getElementById("correct");
  var b = document.getElementById("wrong");

  if (result[box] === correctAnswer) {
    a.style.diplay = 'block';
    b.style.diplay = 'none';
    generateQA();
  } else {
    a.style.diplay = 'none';
    b.style.diplay = 'block';
  }
}//evaluateAnswer function bracket
&#13;
<div id="correct">Correct!</div>
<div id="wrong">Try Again</div>
<div id="question">
  <span id="firstInt"></span>
  <span id="secondInt"></span>
</div>
<div id="instruction">
  Click on the Correct Answer
</div>
<div id="choices">
  <div id="box1" onclick="evaluateAnswer(0)" class="boxes"></div>
  <div id="box2" onclick="evaluateAnswer(1)" class="boxes"></div>
  <div id="box3" onclick="evaluateAnswer(2)" class="boxes"></div>
  <div id="box4" onclick="evaluateAnswer(3)" class="boxes"></div>
</div>
<div id="startreset">
  Start Game
</div>
&#13;
&#13;
&#13;

这一行:

  if (result[box] === correctAnswer) {

将测试是否点击了正确的框。

这是更改过的HTML:

  <div id="box1" onclick="evaluateAnswer(0)" class="boxes"></div>
  <div id="box2" onclick="evaluateAnswer(1)" class="boxes"></div>
  <div id="box3" onclick="evaluateAnswer(2)" class="boxes"></div>
  <div id="box4" onclick="evaluateAnswer(3)" class="boxes"></div>

当用户点击各个框时,onClick处理程序调用{​​{1}}函数并传入该框的索引被单击。 evaluateAnswer0表示存储在3数组中的方框号以及答案索引。 result0results[0]1等。

由于您将答案存储在results[1]数组中,因此您只需要在用户点击的内容和该框的答案之间进行协调。如果他们点击框1,则会调用results。该函数使用evaluateAnswer(0)0中查找答案。如果这是正确的答案,那么您将显示正确的消息。否则,它会显示错误的消息。

答案 1 :(得分:0)

如果这对你有所帮助,我不会这样做,但我重命名了你的一些功能,因为它们没有意义。此外,如果你要将很多变量命名为最佳,那么就像下面这样做。你也错过了正确div的结尾div。如果你做一个简单的if / else语句,最好使用三元运算符。

auto quadraticExp (double a, double b, double c)
   -> std::function<double(double)>
 {
   auto f1 = [=](double x)
    {
      std::cout<<a<<" "<<b<<" "<<c<<" "<<x<<std::endl;
      return ( a*std::pow(x,2) + b*x + c );
    };

   f1(42); // use of f1 inside the function

   return f1;
}