javascript - Vanilla JavaScript : How to make the second number of two random numbers always higher than the first

Question

我正在尝试做一个 child 数学测验，到目前为止我已经能够做到以下几点:让两个介于 0 和 10 之间的随机数出现；使 + 或 - 运算符随机；如果答案错误或正确，请给予反馈；记分；我面临的一个问题是，在某些情况下，运算符将是 - 并且第二个随机数将大于第一个随机数，从而导致 - 数字答案。从下面的代码中可以看出，我尝试在 if 语句中使用 if 语句，并在 if 语句中使用 while 语句。两者都不会产生预期的结果。我很感激任何关于如何解决我的问题的建议。

代码:

document.getElementById("button1").addEventListener("click", question);

var plusMinus = document.getElementById("plusMinus");
var counter = 0;

function question(){
  var startButton = document.getElementById("button1");
  var number1 = document.getElementById("number1");
  var number2 = document.getElementById("number2");
  var decider = Math.random();
  counter ++;

  if(decider<0.5){
    plusMinus.textContent = "+"  
  }
  else{plusMinus.textContent = "-"
  };

  button1.textContent = "Round" + counter;
  number1.textContent = Math.floor(Math.random()*11);
  number2.textContent = Math.floor(Math.random()*11)

  /*Solution No.1 that failed:
  if(plusMinus.textContent == "-"){
    if(number2.textContent < number1.textContent){
      Math.floor(Math.random()*11);
    }
  }
  else{Math.floor(Math.random()*11);
  }*/
  /*Solution No.2 that also failed:
  if(plusMinus.textContent == "-"){
    while(number2.textContent < number1.textContent){
      Math.floor(Math.random()*11);
    }
  }
  else{Math.floor(Math.random()*11);
  }*/
};

document.getElementById("button2").addEventListener("click", answer);

var totalScore = 0;

function answer(){
  var num1 = parseInt(document.getElementById("number1").textContent, 10);
  var num2 = parseInt(document.getElementById("number2").textContent, 10);
  var answer = parseInt(document.getElementById("userAnswer").value, 10);
  var feedBack = document.getElementById("feedBack");
  var scoreReport = document.getElementById("score");

  if (plusMinus.textContent == "+"){
    if(answer == num1 + num2) {
      feedBack.textContent = "Well Done!";
      totalScore = totalScore + 10;
    } 
    else {
      feedBack.textContent = "Try again!";
    }
  }
  else {
    if(answer == num1 - num2){
      feedBack.textContent = "Well Done!";
      totalScore = totalScore +10;
    } 
    else {feedBack.textContent = "Try again!"};
    }

  scoreReport.textContent = totalScore;
};

这是一个 jsfiddle:http://jsfiddle.net/way81/r9vdLkzp/1/

Answer 1

您可以检查它是否为负数。检查 number2 是否大于 number1 然后交换它们。

像这样:

if(plusMinus.textContent == '-' && number2.textContent > number1.textContent) {
    var a = number2.textContent;
    number2.textContent = number1.textContent;
    number1.textContent = a;
}

当您调用 answer() 时，您将再次获得这些值。因此，您交换订单这一事实不会对您的其余逻辑产生任何影响，您也不会得到任何负数。

片段:

document.getElementById("button1").addEventListener("click", question);

    var plusMinus = document.getElementById("plusMinus");

function question(){
    var startButton = document.getElementById("button1");
    var number1 = document.getElementById("number1");
    var number2 = document.getElementById("number2");
    var decider = Math.random();
    
    button1.textContent = "Again";
    number1.textContent = Math.floor(Math.random()*11);
    number2.textContent = Math.floor(Math.random()*11);
    
    if(decider<0.5){
      plusMinus.textContent = "+"  
    }
    else{plusMinus.textContent = "-"};
    
    if(plusMinus.textContent == '-' && number2.textContent > number1.textContent) {
        console.log('swapped')
        var a = number2.textContent;
        number2.textContent = number1.textContent;
        number1.textContent = a;
    }

};

document.getElementById("button2").addEventListener("click", answer);

function answer(){
    var num1 = parseInt(document.getElementById("number1").textContent, 10);
    var num2 = parseInt(document.getElementById("number2").textContent, 10);
    var answer = parseInt(document.getElementById("userAnswer").value, 10);
    var feedBack = document.getElementById("feedBack");
    var scoreReport = document.getElementById("score");
    var totalScore = 0;
     
      if (plusMinus.textContent == "+"){
        if(answer == num1 + num2) {
            feedBack.textContent = "Well Done!";
        } else {
          feedBack.textContent = "Try again!";
        }
      }
      else {
         if(answer == num1 - num2){
           feedBack.textContent = "Well Done!";
         } else {feedBack.textContent = "Try again!"};
      }

      for(count=0; count <=10; count++){
        if(plusMinus == "+" && answer == num1+num2){
            totalScore +1;
        }
        else if(plusMinus == "-" && answer == num1-num2){
            totalScore -1;
        }
      }

      scoreReport.textContent = totalScore;
};

*{
  border: 2pt solid black;
}

p {
  height: 20px;
  width: 50px;
  font-family: impact;
  size: 16pt;
  text-align: center;
}

<body>
<div>
<button id = "button1">Start!</button>
<p id = "number1"></p>
<p id = "plusMinus">+</p>
<p id = "number2"></p>
<input id = "userAnswer" type=text>
<button id = "button2">Answer</button>
<p id = "feedBack"></p>
<p id = "score">Score: 0</p>
</div>
<script src="randomMathsTest.js"></script>
</body>