Creating a random number generating using user inputted number range. (JavaScript)

Question

I am trying to create a random number game. One of the elements that I need is a random number generator that allows the user to set the range of which the number will be chosen from. Currently I have this and it does not work. Any tips?

JavaScript

var min = document.getElementById("minNum").value;
var max = document.getElementById("maxNum").value;

function setRandomNum() {
document.write(Math.floor(Math.random() * (max - min));
}

HTML

<input type="text" id="minNum" name="minNum" />
<input type="text" id="maxNum" name="maxNum">
<input type="button" id="submitRange" name="submitRange" value="Set Range" onclick="setRandomNum()">

For now the document.write is there just to test if it works.

thatOneGuy · Accepted Answer · 2016-03-04 23:19:24Z

2

You're getting the values of the inputs on document load i.e not when the button is pressed and as mentioned in the comments, value is a string so you have to parse it like so :

function setRandomNum() {

  var min = parseInt(document.getElementById("minNum").value);
  var max = parseInt(document.getElementById("maxNum").value);
  var randomNum = Math.floor(Math.random() * (max - min))
  document.write(randomNum);
}

<input type="text" id="minNum" name="minNum" />
<input type="text" id="maxNum" name="maxNum">
<input type="button" id="submitRange" name="submitRange" value="Set Range" onclick="setRandomNum()">

edited Mar 4, 2016 at 23:19

answered Mar 4, 2016 at 22:59

thatOneGuy

10.7k9 gold badges59 silver badges93 bronze badges

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

10 Comments

David Thomas Over a year ago

You may also want to mention that the value is a string, not a number, and use a radix to ensure a decimal number...

daveC Over a year ago

@thisOneGuy So in addition to the code above, would I have to do something like create a new variable such as this? var randomNum = parseFloat(setRandomNum);

thatOneGuy Over a year ago

what are you trying to do ? I think i see. Just do var randomNum = Math.floor(Math.random() * (max - min)); ill append to answer

daveC Over a year ago

@thisOneGuy Sorry, I'm a bit new to javaScript. But I was trying to ensure a number like David Thomas said. So, would the code that was added suffice?

Travis J Over a year ago

The subtracting, (max - min), will force the string to be parsed as an integer regardless.

|

glcheetham · Accepted Answer · 2016-03-04 23:00:14Z

0

Your calls to document.getElementById are outside the function, so they are not executed in time.

function setRandomNum() {
    var min = document.getElementById("minNum").value;
    var max = document.getElementById("maxNum").value;
    document.write(Math.floor(Math.random() * (max - min));
}

answered Mar 4, 2016 at 23:00

glcheetham

1,0039 silver badges23 bronze badges

Comments

Aral Roca · Accepted Answer · 2016-03-04 23:28:27Z

0

I voted for thisOneGuy solution. But I recommend to put the getElementId outside the function for performance:

var minElement = document.getElementById("minNum");
var maxElement = document.getElementById("maxNum");

function setRandomNum () {
  var max, min, random;

  max = parseInt(maxElement.value);
  min = parseInt(minElement.value);
  random = Math.floor(Math.random() * (max - min));

  document.write(random);
}

answered Mar 4, 2016 at 23:28

Aral Roca

5,9978 gold badges52 silver badges83 bronze badges

Collectives™ on Stack Overflow

Creating a random number generating using user inputted number range. (JavaScript)

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related