随机数不在javascript范围内[重复]

Question

我做了一个随机数猜游戏。用户必须设置可以生成随机数的最小和最大范围，并且他们获得的尝试次数取决于他们设置的范围的大小。因此，如果用户输入的最小值为 1，最大值为 100，则范围将除以 10 并四舍五入，以让用户尝试猜测该数字 10 次。

我遇到的问题是生成的随机数总是超出设定范围，我不知道为什么。

我的 javascript 代码：

winner = "Well done, you guessed the number correctly";
loser = "Unfortunately you did not guess the number correctly. Game Over!";
higher = "Your guess was too low. Guess higher";
alreadyWon = "You have already guessed correctly. Press f5 to play again";
lower = "Your guess was too high. Guess lower";
gameWon = false;
counter = 0;

function processingFunction(minRange, maxRange) {
  randomNo = Math.floor(Math.random() * (maxRange - minRange)) + minRange; //random number generated
  attempts = Math.round((maxRange - minRange) / 10); //number of attempts generated
  return (randomNo, attempts);
}

function showFunction(guess) {

  if (gameWon == true) {
    document.getElementById("output1").innerHTML = alreadyWon;
  } else if (counter < attempts) {
    if (guess == randomNo) {
      document.getElementById("output1").innerHTML = winner;
      gameWon = true;
    } else if (guess > randomNo) {
      document.getElementById("output1").innerHTML = lower;
    } else {
      document.getElementById("output1").innerHTML = higher;
    }
    counter++;
  } else {
    document.getElementById("output1").innerHTML = loser;
  }
}

<center>
  <h2>Random Number Guess</h2>
</center>
<h3>Enter in the minimum range and the maximum range. Accompanied by your first guess</h3>
Minimum Range:<input type="text" id="inputMinRange"></input> Maximum Range:<input type="text" id="inputMaxRange"></input>
<button type="button" onclick="processingFunction(document.getElementById('inputMinRange').value, document.getElementById('inputMaxRange').value)">Set Range</button>
<br><br>
<input type="text" id="guessInput"></input>
<button type="button" onclick="showFunction(document.getElementById('guessInput').value)">Guess</button>
<pre type="text" id="output1"></pre>

Answer 1

input 的value始终 是一个字符串，当您使用+ 其中一个操作数是一个字符串时，您会得到字符串连接，而不是加法。 （- 将强制数字，但 + 不会。）假设我们填写 1 和 100。这样：

randomNo = Math.floor(Math.random() * (maxRange - minRange)) + minRange; //random number generated

...接受maxRange - minRange 并得到 99（到目前为止还不错），将其乘以随机值得到（例如）83，然后 追加 "1" 得到"831".

您希望在将这些值输入函数之前将它们转换为数字。有很多方法可以做到这一点（参见this answer for a rundown of them，但例如，一元+：

<button type="button" onclick="processingFunction(+document.getElementById('inputMinRange').value, +document.getElementById('inputMaxRange').value)">Set Range</button>
<!-- ---------------------------------------------^------------------------------------------------^                                -->

现在该函数一直在处理数字。

更新了sn-p：

winner = "Well done, you guessed the number correctly";
loser = "Unfortunately you did not guess the number correctly. Game Over!";
higher = "Your guess was too low. Guess higher";
alreadyWon = "You have already guessed correctly. Press f5 to play again";
lower = "Your guess was too high. Guess lower";
gameWon = false;
counter = 0;

function processingFunction(minRange, maxRange) {
  randomNo = Math.floor(Math.random() * (maxRange - minRange)) + minRange; //random number generated
  attempts = Math.round((maxRange - minRange) / 10); //number of attempts generated
console.log(minRange, maxRange, randomNo, attempts);
  return (randomNo, attempts);
}

function showFunction(guess) {

  if (gameWon == true) {
    document.getElementById("output1").innerHTML = alreadyWon;
  } else if (counter < attempts) {
    if (guess == randomNo) {
      document.getElementById("output1").innerHTML = winner;
      gameWon = true;
    } else if (guess > randomNo) {
      document.getElementById("output1").innerHTML = lower;
    } else {
      document.getElementById("output1").innerHTML = higher;
    }
    counter++;
  } else {
    document.getElementById("output1").innerHTML = loser;
  }
}

<center>
  <h2>Random Number Guess</h2>
</center>
<h3>Enter in the minimum range and the maximum range. Accompanied by your first guess</h3>
Minimum Range:<input type="text" id="inputMinRange"></input> Maximum Range:<input type="text" id="inputMaxRange"></input>
<button type="button" onclick="processingFunction(+document.getElementById('inputMinRange').value, +document.getElementById('inputMaxRange').value)">Set Range</button>
<br><br>
<input type="text" id="guessInput"></input>
<button type="button" onclick="showFunction(document.getElementById('guessInput').value)">Guess</button>
<pre type="text" id="output1"></pre>

Answer 2

使用下面的代码来转换你正在传递一个字符串，+ 将附加 minRange 字符串和生成的随机数。

randomNo = Math.floor(Math.random() * (maxRange - minRange))+Math.round(minRange);

或

randomNo = Math.floor(Math.random() * (maxRange - minRange))-(-minRange);