Question

<html>
<head>
<script>
function dogName()
{
  var rand = alert("Clint.");
  var rand = alert("Bee.");
  var rand = alert("Copper.");
}
</script>
</head>
<body>
<form>
<input type="button"       value="RandName" onClick='dogName()'>
</form>
</body>
</html>

在此代码中，函数dogName()有三个变量：Clint，Bee和Copper。如果你点击按钮(RandName)，你会得到一个从上面列出的函数中选择的随机名称。我到处寻找答案，但无济于事。提前谢谢！

Answer 1

首先，您的函数只有一个变量rand will be undefined alert() return没有function dogName () { var names = ['clint','Bee','Copper']; return names[Math.floor(Math.random() * names.length)] } var name = dogName(); console.log(name);任何调用上下文。

要返回随机名称，请执行以下操作：

id

JS Fiddle demo

稍微更新的演示，用于显示元素中的输出（由function dogName () { var names = ['Clint','Bee','Copper'], index = Math.floor(Math.random() * names.length), chosen = names[index]; document.getElementById('output').value = chosen; return chosen; }标识）：

<form>
    <input type="button" value="RandName" onClick='dogName(this)' />
    <label>The generated dog-name is: <input id="output" readonly="readonly" /></label>
</form>

适用于以下HTML：

onclick

JS Fiddle demo

此外，通常最好避免在HTML中使用事件处理属性（onfocus，onchange，function dogName () { var names = ['Clint','Bee','Copper'], index = Math.floor(Math.random() * names.length), chosen = names[index]; document.getElementById('output').value = chosen; return chosen; } var button = document.querySelector('input[value="RandName"]'); button.addEventListener('click', dogName);等），这个概念是“不引人注目的JavaScript”;相反，考虑在JavaScript本身处理事件绑定（这种方式几乎都在同一个地方，使维护和更改更容易（这在某些时候通常是不可避免的）。也就是说，这是一种适用于大多数现代的方法浏览器（包括从版本9开始的IE）：

{{1}}

JS Fiddle demo

参考文献：

CSS：
- Attribute ([attribute=value]) selectors。
JavaScript的：
- document.querySelector()。
- Math.floor()。
- Math.random()。

参考书目：

“The Principles of Ubobtrusive JavaScript”（W3.org）。
“Unobtrusive JavaScript”（维基百科）。

Answer 2

<html>
<head>
<script>
function dogName()
{
var rand = [ 'Clint', 'Bee', 'Copper' ];
alert(rand[Math.floor(Math.random()*rand.length)]);
}
</script>
</head>
<body>
<form>
<input type="button"       value="RandName" onClick='dogName()'>
</form>
</body>
</html>

创建一个数组并选择一个随机元素。

给功能交替输出

2 个答案: