Question

我正在研究随机数生成器。它基本上是一个带有3个参数（参数）的函数：

计算，将生成多少号码
min，生成数字的最小值
max，生成数字的最大值

以下是代码：

function numGenerator(count, min, max) {
  var arr = [],
  count = document.getElementById('counter').value,
  min = document.getElementById('min_number').value,
  max = document.getElementById('max_number').value;
  while (arr.length < count) {
    var randomnumber = Math.floor(Math.random() * max) + min;
    if (arr.indexOf(randomnumber) > -1) continue;
    arr[arr.length] = randomnumber;
  }
  // Wrapp each number in a div and put them
  // all inside a container
  for (var i = 0; i < arr.length; i++) {
    document.getElementById('numbers_container').innerHTML += '<div class="number">' + arr[i] + '</div>';
  }
}
document.getElementById('generateBtn').addEventListener("click", numGenerator(count, min, max));

<div class="container">
  <div id="numbers_container"></div>
  <div id="conditions">
    <span>Generate</span>
    <input type="text" id="counter"> <span>numbers, between</span>
    <input type="text" id="min_number"> <span>and</span>
    <input type="text" id="max_number">
  </div>
  <button id="generateBtn">Generate numbers</button>
</div>

这会产生错误：Uncaught ReferenceError: count is not defined。为什么？我的错误在哪里？

Answer 1

您的代码正在调用方法numGenerator并向其传递3个变量。这些3个变量未在代码中的任何位置定义。这就是错误。你没有理由首先传递这些变量。

您的代码应该是

document.getElementById('generateBtn').addEventListener("click", numGenerator)

第二个问题是count，min和max是字符串，而不是数字，所以你需要使用parseInt，parseFloat，Number将它们转换为数字。

最后你的随机数逻辑需要一些工作。查看Generating random whole numbers in JavaScript in a specific range?

Answer 2

感谢 Matheus Cuba 和其他人，我设法制作了一个工作脚本（或者我相信）：

＆＃13;

function numGenerator(count, min, max) {
  var arr = [],
  count = parseInt(document.getElementById('counter').value),
  min = parseInt(document.getElementById('min_number').value),
  max = parseInt(document.getElementById('max_number').value);
  while (arr.length < count) {
    var randomnumber = Math.floor(Math.random() * max) + min;
    if (arr.indexOf(randomnumber) > -1) continue;
    arr[arr.length] = randomnumber;
  }
  // Clear the numbers container before generating new numbers
  document.getElementById('numbers_container').innerHTML="";
  // Wrapp each number in a div and put them
  // all inside a container
  for (var i = 0; i < arr.length; i++) {
    document.getElementById('numbers_container').innerHTML += '<div class="number">' + arr[i] + '</div>';
  }
}
document.getElementById('generateBtn').addEventListener("click", numGenerator);

＆＃13;

<div class="container">
  <div id="numbers_container"></div>
  <div id="conditions">
    <span>Generate</span>
    <input type="text" id="counter"> <span>numbers, between</span>
    <input type="text" id="min_number"> <span>and</span>
    <input type="text" id="max_number">
  </div>
  <button id="generateBtn">Generate numbers</button>
</div>

＆＃13;

Answer 3

如果要将count，min和max设置为用户在单击时选择的输入，则必须在该功能外部执行此操作。重新定义在函数内部用作参数的变量是没有意义的。我会先尝试从函数中删除这些行：

 count = document.getElementById('counter').value,
 min = document.getElementById('min_number').value,
 max = document.getElementById('max_number').value;

 (note: those should also be semicolons and not commas at the end)

然后使onclick事件看起来更像这样：

document.getElementById('generateBtn').onclick = function() {
  var newCount = parseInt(document.getElementById('counter').value);
  var newMin = parseInt(document.getElementById('min_number').value);
  var newMax = parseInt(document.getElementById('max_number').value);
  numGenerator(newCount, newMin, newMax);
};

这就是我想要做的事情。希望它有所帮助！

Answer 4

这样的版本解决了其他答案中出现的各种问题。它不是我为之骄傲的代码......但它是一个开始。

＆＃13;

function numGenerator() {
  let count = Number(document.getElementById('counter').value);
  let min = Number(document.getElementById('min_number').value);
  let max = Number(document.getElementById('max_number').value);
  // ensure min is no bigger than max
  [min, max] = [Math.min(min, max), Math.max(min, max)]
  // ensure count is not higher than the number of values available
  count = Math.min(count, max - min + 1)
  let arr = []; 
  while (arr.length < count) {
    // properly find a random value in [min, max]
    let randomnumber = Math.floor(Math.random() * (max - min + 1)) + min;
    if (arr.indexOf(randomnumber) > -1) continue;
    arr.push(randomnumber);
  }
  // Clear the numbers container before generating new numbers
  document.getElementById('numbers_container').innerHTML="";
  // Wrapp each number in a div and put them
  // all inside a container
  for (var i = 0; i < arr.length; i++) {
    document.getElementById('numbers_container').innerHTML += '<div class="number">' + arr[i] + '</div>';
  }
}

document.getElementById('generateBtn').addEventListener("click", numGenerator)

＆＃13;

<div class="container">
  <div id="numbers_container"></div>
  <div id="conditions">
    <span>Generate</span>
    <input type="text" id="counter"> <span>numbers, between</span>
    <input type="text" id="min_number"> <span>and</span>
    <input type="text" id="max_number">
  </div>
  <button id="generateBtn">Generate numbers</button>
</div>

＆＃13;

此版本不处理可能的非整数输入，并且如果min大于max，或者count是QSqlQueryModel*Acceuil::consulter_evenements() { QSqlDatabase bd= QSqlDatabase::database(); QSqlQueryModel * model=new QSqlQueryModel(); model->setQuery("SELECT E.* FROM EVENEMENT AS E JOIN CATALOGUES_EVENEMENTS as CE JOIN CATALOGUES as C ON C.ID_Catalogue = CE.ID_Catalogue AND E.ID=CE.ID_Evenement AND C.ID_Catalogue='"+ui->listeCatalogues->selectionModel()->selectedRows(0).at(0).data(Qt::DisplayRole).toString()+"' GROUP BY ID_Catalogue"); return model; }，则会对您希望执行的操作做出一些假设。大于潜在值的数量。

它也是一个很差的因素，将数字生成的问题与DOM输入和DOM输出混合在一起。

更改为修复这些是留给读者的练习。： - ）

随机数生成器：函数参数显示为未定义

4 个答案: