Random Number Generator using html and javascript not giving proper random number as answer

Question

I started learning JavaScript about a week ago and now I have encountered a problem. My code is not returning proper random number as an answer. Please have a look at my code and help me out. Thanks.

    function calc() {
      var min = document.getElementById('min').value;
      var max = document.getElementById('max').value;
      var x = Math.floor(Math.random() * (max - min) + max);
      document.getElementById('random').innerHTML = x;
    }

<table border='1px' color='black'>
  <tr>
    <td>min</td>
    <td>
      <input type='text' id='min' />
    </td>
  </tr>
  <tr>
    <td>max</td>
    <td>
      <input type='text' id='max' />
    </td>
  </tr>
  <tr>
    <td>
      <input type='button' onClick='calc()' value='generate' />
    </td>
    <td>
      <p id='random'>0</p>
    </td>
  </tr>
</table>

random() gives a no. between 0 and 1. multiplying it by (max-min) will give us a no between 0 and (max-min) and adding min to both will give a no b/w min and max. this code is generating a random number but now i discovered that it is giving a number between 0 and (max-min) ie it is not taking +min into account :| — Rahul Yadav, Jun 08 '15 at 19:29
`max` and `min` are strings, not numbers; use `parseInt` on them before beginning your computation. — Blazemonger, Jun 08 '15 at 19:37
_"...ie it is not taking +min into account :|"_ - it's not taking `+max` into account right?... — War10ck, Jun 08 '15 at 19:49

score 3 · Answer 1 · edited May 23 '17 at 12:30

You must use parseInt(string,10) on your min and max values before beginning your computation, or else ... + max will concatenate strings instead of adding numbers.

As for the arithmetic, try var x = Math.floor(Math.random() * (max - min + 1) + min) instead.

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

<table border='1px' color='black'>
  <tr>
    <td>min</td>
    <td>
      <input type='text' id='min' />
    </td>
  </tr>
  <tr>
    <td>max</td>
    <td>
      <input type='text' id='max' />
    </td>
  </tr>
  <tr>
    <td>
      <input type='button' onClick='calc()' value='generate' />
    </td>
    <td>
      <p id='random'>0</p>
    </td>
  </tr>
</table>

score 1 · Answer 2 · answered Jun 08 '15 at 20:02

Change your javascript code like this

    <script type="javascript">              
function calc(){
      var min = parseInt(document.getElementById('min').value);
      var max = parseInt(document.getElementById('max').value);
      var x = Math.floor(Math.random() * (max - min) + min);
      document.getElementById('random').innerHTML = x;    
}                     
</script>

Random Number Generator using html and javascript not giving proper random number as answer

2 Answers2