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
– Rahul Yadav, Commented Jun 8, 2015 at 19:29
max and min are strings, not numbers; use parseInt on them before beginning your computation. — Blazemonger
– Blazemonger, Commented Jun 8, 2015 at 19:37
"...ie it is not taking +min into account :|" - it's not taking +max into account right?... — War10ck
– War10ck, Commented Jun 8, 2015 at 19:49

Community · Accepted Answer · 2017-05-23 12:30:02Z

3

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>

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jun 8, 2015 at 19:29

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sampath · Accepted Answer · 2015-06-08 20:02:57Z

1

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>

answered Jun 8, 2015 at 20:02

Sampath

4016 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related