random number js min max

Question

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>

Checkout this.. after 2sec google! http://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range — pleinx, Jun 30 '16 at 15:07
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random — Akira Lynn, Jun 30 '16 at 15:09
debug your code and you would easily see why it's not working. — James, Jun 30 '16 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, Jun 30 '16 at 15:36

score 3 · Answer 1 · edited Jun 30 '16 at 15:19

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>

+1 for your good explanation of coercion. For the rest of the answer I would rant about giving the fourth answer with the same content... ,) — Christoph, Jun 30 '16 at 15:19

score 1 · Accepted Answer · edited Jun 30 '16 at 15:16

1

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 compatibility, 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);
}

edited Jun 30 '16 at 15:16

Christoph

50,121
21
99
128

answered Jun 30 '16 at 15:11

Gaetan

325
1
15

I have just checked and parseInt() also exist [here](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/parseInt) – Gaetan Jun 30 '16 at 15:15
@Christoph why did you edit my post and I cound'nt approve or refuse it? – Gaetan Jun 30 '16 at 15:20
Because I'm cool. :-D Also, you were first with the correct answer, so I just edited yours instead of just write another answer with 95% same content. – Christoph Jun 30 '16 at 15:22
Y sure maybe but why didn't have I the choice of approve or refuse the edit? – Gaetan Jun 30 '16 at 15:23
Because I have the right to edit content without the author's approval. http://stackoverflow.com/help/privileges – Christoph Jun 30 '16 at 15:24
Oh ok its the first time its happened to me I was so supprised. okay then :) – Gaetan Jun 30 '16 at 15:25
For the next time, I would encourage you to not only answer the main point of the question, but if you see any other problems (e.g. the OP relying on non-standard conform behaviour like the global namespace elements) to point it out and provide alternatives for this as well. This is the reason, why I edited your answer in the first place. – Christoph Jun 30 '16 at 15:30

score 1 · Answer 3 · answered Jul 02 '18 at 06:25

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));

score 0 · Answer 4 · answered Jun 30 '16 at 15:15

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>

score 0 · Answer 5 · answered Jun 30 '16 at 15:15

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>

random number js min max

5 Answers5

Linked