CODEWITHSUNDEEP
javascriptnan
user3080415
user3080415

Reputation:

Javascript Random Number Generator comes up with NaN

I am trying to make a random number generator using a form. When you press the button, and enter in the maximum number, it comes up with a dialog box reading NaN, when it is meant to come up with the random number.

I have some code that looks like this:

<html>
<head>

</head>
<body>

<form name="gen">

<h1>Random Number Generator</h1>

<b>Number:</b> 1 to
<input id="numgen" type="text"/>               

<button name="generate" type="submit" onclick="gennum()">Generate!</button>

<script>
function gennum()
{
alert(Math.floor(Math.random() * num.value + 1));
}

var num = document.getElementById('numgen').value;
</script>

</form>

</body>
</html>

I am not very good with Javascript, but I know a bit. If anyone knows how to fix this, I would be happy.

Upvotes: 1

Views: 3964

Answers (1)

m59
m59

Reputation: 43785

num.value is a string. Use parseInt(num.value, 10) to turn it into a number, that way it can be added to a number appropriately.

Also, it looks like you're getting the value twice, and the first time is when the page loads (so it doesn't have a value yet:

var numElem = document.getElementById('numgen'); //remove value here

then in your function: 

alert(Math.floor(Math.random() * parseInt(num.value + 1)));

and, you need to use type="button" on your button, or the page will reload.

Here's your code refactored with better practices.

Live demo here (click).

Markup:

<form name="gen">
  <h1>Random Number Generator</h1>

  <b>Number:</b> 1 to
  <input id="numgen" type="text"/>               

  <button id="generate" type="button">Generate</button>
</form>

JavaScript:

/* get element references */
var genButton = document.getElementById('generate');

var numInput = document.getElementById('numgen');

//use javascript to add the click function
genButton.addEventListener('click', function() {
  /* it's easier to read and debug if you break things up
   * instead of putting it all on one line with tons of ((()))
   */
  var rand = genRandom(1, parseInt(numInput.value, 10));
  alert(rand);
});

function genRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Upvotes: 1

Related Questions