I'm trying to get random number between 2 numbers from input in JavaScript. When I put numbers instead of max.value and min.value it works, but not with variable. I can't understand how does random in js work, in other programming languages I know it's easy done like random(min,max) so I totally don't understand why is it so hard in JS. Thank you.

function genRanNumb() {
  document.getElementById('demo').innerHTML=Math.floor(Math.random()*(max.value-min.value+1)+min.value);
}

<input type="text" id="min">
<input type="text" id="max">
<button id="btn" onclick="genRanNumb()">button</button>
<p id="demo"></p>

I'm trying to get random number between 2 numbers from input in JavaScript. When I put numbers instead of max.value and min.value it works, but not with variable. I can't understand how does random in js work, in other programming languages I know it's easy done like random(min,max) so I totally don't understand why is it so hard in JS. Thank you.

function genRanNumb() {
  document.getElementById('demo').innerHTML=Math.floor(Math.random()*(max.value-min.value+1)+min.value);
}

<input type="text" id="min">
<input type="text" id="max">
<button id="btn" onclick="genRanNumb()">button</button>
<p id="demo"></p>

• javascript
• html
• random

• Checkout this.. after 2sec google! stackoverflow./questions/1527803/… – pleinx Commented Jun 30, 2016 at 15:07
• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Akira M Commented Jun 30, 2016 at 15:09
• debug your code and you would easily see why it's not working. – James Commented Jun 30, 2016 at 15:11
• @pleinx why should the given link help? The OP already has the formular that was presented in the accepted answer. The problem was that the values have not been coverted from string to number. – t.niese Commented Jun 30, 2016 at 15:36

5 Answers 5

The problem is that the value of input elements are always strings. When you write max.value - min.value, JavaScript coerces the values to numbers because of the subtraction operator. BUT when you write 0.3 + "8" the result is "0.38" instead of "8.3". That's why the original code gives strange values, max.value never gets added but appended. Here is a possibility how to fix it: coerce the strings into numbers first with the uniary + operator (or use parseInt):

function genRanNumb() {
  var vMin = +min.value;
  var vMax = +max.value;
  var generated = Math.floor(Math.random()*(vMax - vMin + 1) + vMin);
  demo.innerText = generated;
}

<input type="text" id="min">
<input type="text" id="max">
<button id="btn" onclick="genRanNumb()">button</button>
<p id="demo"></p>

I think the matter is your inputs are text and your random wants int values The solution is to surrond your variable with parseFloat(yourvariable) in javascript.
in your case you have :

function genRanNumb() {
  document.getElementById('demo').innerHTML=Math.floor(Math.random()*(parseFloat(max.value)-parseFloat(min.value)+1)+parseFloat(min.value));
}

Hope it answer to your question.

For better readability and best patibility, you should write it like this:

function genRanNumb() {
  var max = parseFloat(document.getElementById("max").value,10),
      min = parseFloat(document.getElementById("min").value,10);

  document.getElementById('demo').innerHTML=Math.floor(Math.random()*(max-min+1)+min);
}

Alternative to get the random number from min to max

let makeGuess = function(guess){
    let min = 1;
    let max = 5;   
    let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min

    return guess === randomNumber;

}
console.log(makeGuess(1));

Your random number logic is correct. You just need to retrieve the values from the textboxes, which are strings, and then parse them as integers.

function genRanNumb() {
  var min = parseInt(document.getElementById('min').value, 10);
  var max = parseInt(document.getElementById('max').value, 10);
  document.getElementById('demo').innerHTML=Math.floor(Math.random()*(max-min+1)+min);
}

<input type="text" id="min">
<input type="text" id="max">
<button id="btn" onclick="genRanNumb()">button</button>
<p id="demo"></p>

The probleme is your value are string so when you do:

(max.value-min.value+1)+(min.value)

it like to do, for example, 6" + "5" so "65"

So try it:

 <script>
   function genRanNumb() {
     document.getElementById('demo').innerHTML=Math.floor(Math.random()*(parseInt(max.value-min.value+1))+parseInt(min.value));
   }

</script>