Vanilla JavaScript:如何使两个随机数中的第二个总是高于第一个

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

本文关键字：第二个 第一个 高于 随机数 JavaScript 何使两 Vanilla      更新时间：2023-09-26

我正在尝试做一个儿童数学测验，到目前为止我已经能够做到以下几点：获得两个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/

您可以检查它是否为负数。检查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>

您可以使用第一个随机数作为创建第二个随机数的参数。例如：

var num1 = Math.floor(Math.random()*11);
var num2 = num1+ Math.floor(Math.random()*(10-num1));

或者类似的东西。只需创建一个较小的范围并将第一个数字添加到结果中，就可以生成一个介于第一个随机数和10之间的随机数。

附录

通过遵循这种方法，你确实扭曲了问题中出现较大数字的可能性@乔尔的回答不会因此而受损。

这里有一个你可以使用的通用解决方案（它不完全适应你当前的代码示例，但我相信你会让它发挥作用）：

// create a random Boolean that determines whether it's minus
var isMinus = !Math.round(Math.random());
// create an array of two random numbers from 0-10
var numbers = [Math.floor(Math.random()*11), Math.floor(Math.random()*11)];
// if isMinus, sort numbers ascending, else keep as-is
numbers = isMinus ? numbers.sort().reverse() : numbers;
// assign the proper sign to the DOM element
plusMinus.textContent = isMinus ? '-' : '+';
// assign the proper array elements to the DOM elements
number1.textContent = numbers[0];
number2.textContent = numbers[1];
相关文章：