Random number is not staying within range javascript

Question

I have made a Random Number Guess game. The user has to set the minimum and maximum range the random number can be generated in and the number of attempts they get changes dependent on the size of the range they have set. So if the user enters in a minimum of 1 and a maximum of 100 the range will be divided by 10 and rounded up to give the user 10 attempts to guess the number.

The problem I have is that the random number being generated is always way out of the set range and I am not sure why.

My javascript code:

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

The value of an input is always a string, and when you use + where one of the operands is a string, you get string concatenation, not addition. (- will coerce to number, but + will not.) So say we fill in 1 and 100. This:

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

...takes maxRange - minRange and gets 99 (so far so good), multiplies that by a random value to get (say) 83, and then appends "1" to it to get "831".

You want to convert those values to numbers before feeding them into the function. There are lots of ways to do that (see this answer for a rundown of them, but for instance, the unary +:

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

Now the function is working with numbers throughout.

Updated snippet:

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

use below code to convert you are passing a string and + will append the minRange string with generated random no.

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

or

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