Question

我正在尝试使用表单制作随机数生成器。当你按下按钮并输入最大数字时，它会出现一个读取NaN的对话框，当它打算提供随机数时。

我有一些看起来像这样的代码：

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

我对Javascript不是很了解，但我知道一点。如果有人知道如何解决这个问题，我会很高兴。

Answer 1

num.value是一个字符串。使用parseInt(num.value, 10)将其变为数字，这样就可以将其合适地添加到数字中。

此外，看起来您获得的值是两次，第一次是页面加载时（因此它还没有值：

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

然后在你的函数中：

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

并且，您需要在按钮上使用type="button"，否则页面将重新加载。

这里的代码是用更好的做法重构的。

Live demo here (click).

<强>标记：

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

Javascript随机数生成器提出了NaN

1 个答案:

这里的代码是用更好的做法重构的。