Javascript随机数和背景从按钮改变答案

【问题标题】：Javascript random number and background change from buttonJavascript随机数和背景从按钮改变
【发布时间】：2013-11-17 00:05:02
【问题描述】：

我遇到了麻烦。我希望按下一个按钮并将一个随机数返回到一个文本框中。如果数字是偶数，我想将背景颜色更改为红色，如果是奇数，我想将背景颜色更改为黑色。我几乎可以使用它，但是当我按住按钮时它不会继续更改背景颜色，它只会更改第一个。这是我的代码。任何帮助将不胜感激。

<script type="text/javascript">

function BackgroundEven(){
document.body.style.backgroundColor="#DA0505";
}
function BackgroundOdd(){
document.body.style.backgroundColor="#000000";
}

function Random() {

return Math.floor(Math.random()*37);
}

var rando= Random();
function Change(){
if(rando%2 == 0)
{
BackgroundEven();
} 
else{
BackgroundOdd();
}
}
}

</script>

<input type="text" name="Result" value="" id="Random" size="5"/>
<input type="button" value="Spin" onclick="document.getElementById('Random').value=Random();Change();" />
</input>

【问题讨论】：

将您的 onclick 包装成一个函数（更易于阅读）。但问题是 var rando 仅在页面加载时设置一次

标签： javascript button random numbers

【解决方案1】：

您在onclick 中生成一个随机数，然后使用新生成的随机数进行奇/偶校验。您需要确保检查的是填充到输入中的随机数：

<input type="button" value="Spin" onclick="Change(document.getElementById('Random').value=Random());" />

function Change(currentNum) {
  if(currentNum % 2 == 0)
    BackgroundEven();
  else
    BackgroundOdd();
}

请注意我是如何将新分配的随机数传递给Change() 函数的，因此它使用的随机数与填充到输入中的随机数相同。

【讨论】：

【解决方案2】：

试试Math.floor(Math.random()*2);，0 或 1。

【讨论】：

【解决方案3】：

尝试将随机数作为参数传递给 Change，而不是依赖闭包。

function Change(rando){
  if(rando%2 == 0) {
    BackgroundEven();
  } 
  else {
    BackgroundOdd();
  }
}

使用 onclick 一次调用两个或三个函数也不是很漂亮。现在，我们通常会在文档加载后立即将侦听器附加到对象。也就是说，让你的代码更漂亮一点……

function clickForRandom(){
  var rando = Random();
  document.getElementById('Random').value = rando;
  Change(rando)
}

<input type="button" value="Spin" onclick="clickForRandom()" />

【讨论】：