不生成随机数答案

【问题标题】：Not generating random number不生成随机数
【发布时间】：2020-09-05 18:14:50
【问题描述】：

我正在制作一个使用 JS 生成随机数的网站。但它出于某种原因显示undefined。我不希望那样发生。这是我的代码。

var showRandomNumberDiv = document.getElementById("show-random-number");
var number1 = document.getElementById("number-1");
var number2 = document.getElementById("number-2");
var generate = document.getElementById("generate");

var newPara = document.createElement("p");
generate.addEventListener("click", function() {
  numbers = [];
  for (var i = 0; i > number1 && i < number2; i++) {
    numbers.push(i);
  }
  newPara.innerHTML = numbers[Math.floor(Math.random() * numbers.length)];
  showRandomNumberDiv.appendChild(newPara);
})

<h1>Hello, and welcome to Random generator!</h1>
<h2>Not only numbers, but letters too!</h2>
<p>If you want to enter a <span style="font-style:italic; font-weight: bold;">positive</span> number, see below.</p>

<!-- Generate a random number -->

<input type="text" placeholder="number 1" id="number-1">
<input type="text" placeholder="number 2" id="number-2">
<input type="button" value="Generate" id="generate">
<div id="show-random-number">

</div>

<script src="javascript.js"></script>

【问题讨论】：

你调试过代码吗？只需将debugger 添加到numbers = [] 之前的一行，然后查看每个步骤以及您缺少什么...
"i > number1 && i 这些是输入元素，所以你需要得到它应该是i > number1.value && i < number2.value
newPara.innerHTML = numbers[Math.floor(Math.random() * numbers.length)];。好的，所以，Math.random() 生成了一个介于 0 和 1 之间的值（这是一个演示，我花了 3 秒时间拼凑起来：demo）。所以，你选择说，0.75*2 的索引，那么，你的索引键是 1.5？但是推送会添加 1=>value、2=>value 之类的键？我根本不明白这应该如何工作？
输入是否应该有一些值，例如 value="1" 然后通过var number1 = document.getElementById("number-1").value;访问它

标签： javascript html random

【解决方案1】：

您确实在代码中犯了一些错误。这是固定版本：

var showRandomNumberDiv = document.getElementById("show-random-number");
var number1 = document.getElementById("number-1");
var number2 = document.getElementById("number-2");
var generate = document.getElementById("generate");

var newPara = document.createElement("p");
showRandomNumberDiv.appendChild(newPara);

generate.addEventListener("click", function() {
  var numbers = [];
  for (var i = parseInt(number1.value); i < parseInt(number2.value); i++) {
    numbers.push(i);
  }
  newPara.innerHTML = numbers[Math.floor(Math.random() * numbers.length)];
})

<h1>Hello, and welcome to Random generator!</h1>
<h2>Not only numbers, but letters too!</h2>
<p>If you want to enter a <span style="font-style:italic; font-weight: bold;">positive</span> number, see below.</p>

<!-- Generate a random number -->

<input type="text" placeholder="number 1" id="number-1">
<input type="text" placeholder="number 2" id="number-2">
<input type="button" value="Generate" id="generate">
<div id="show-random-number">

</div>

<script src="javascript.js"></script>

要从输入中获取价值，您必须使用input.value 属性。您也可以使用parseInt函数将字符串值转换为数字。

这里还有代码的优化版本。

var showRandomNumberDiv = document.getElementById("show-random-number");
var number1 = document.getElementById("number-1");
var number2 = document.getElementById("number-2");
var generate = document.getElementById("generate");

var newPara = document.createElement("p");
showRandomNumberDiv.appendChild(newPara);

generate.addEventListener("click", function() {
  var min = parseInt(number1.value);
  var max = parseInt(number2.value);
  
  newPara.innerText = min + Math.round(Math.random() * (max - min));
})

<h1>Hello, and welcome to Random generator!</h1>
<h2>Not only numbers, but letters too!</h2>
<p>If you want to enter a <span style="font-style:italic; font-weight: bold;">positive</span> number, see below.</p>

<!-- Generate a random number -->

<input type="text" placeholder="number 1" id="number-1">
<input type="text" placeholder="number 2" id="number-2">
<input type="button" value="Generate" id="generate">
<div id="show-random-number">

</div>

<script src="javascript.js"></script>

您可以将Math.random() 乘以最大值和最小值之间的差，然后将结果与最小值相加，得到最小值和最大值之间的随机数。

【讨论】：