Question

好的，所以我有一个随机挑选的名字数组，显示在一个名为“textbox”的文本区域。它适用于math.random（），但在重新加载页面时只会选择一个新的随机名称。每当有人点击按钮时，我如何才能选择一个新的随机名称，以便他们不必重新加载页面？

<p id="textbox"></p>
<button onclick="generateFunction()"> Generate </button>

<script>
function generateFunction() {
  var Names = ["Alex", "Alan", "Bob"];
  var displayNames = Names[Math.floor(Math.random() * Names.length)];

  document.getElementById("textbox").innerHTML = displayNames;
}

Answer 1

您的代码非常正确。但它有语法错误。

首先，它在标记和脚本中缺少<script type=text/javascript"> function generateFunction { var Names = ["Alex", "Alan", "Bob"]; var displayNames = Names[Math.floor(Math.random() * Names.length)]; document.getElementById("textbox").innerHTML = displayNames; } </script <p id="textbox"></p> <button onclick="generateFunction"> Generate </button>。
其次，在调用函数之前，您尚未声明该函数。这就像试图调用尚未初始化的变量的值。

这将是正确的代码：

$inject

Answer 2

由于您希望每次点击都有新名称，因此您需要检查名称是否与显示的名称相同，如果需要重新生成名称。

您可以使用简单的循环语句来执行此操作，如

function generateFunction() {
  var Names = ["Alex", "Alan", "Bob"],
    existing = document.getElementById("textbox").innerHTML.trim(),
    displayNames;
  do {
    displayNames = Names[Math.floor(Math.random() * Names.length)]
  } while (displayNames == existing)


  document.getElementById("textbox").innerHTML = displayNames;
}

<p id="textbox"></p>
<button onclick="generateFunction()">Generate</button>

随机选择innerHTML中显示的名称

2 个答案: