基于功能改变的Javascript背景

时间:2015-04-14 22:05:20

标签: javascript button random background click

当我点击一个按钮时,我必须模拟一个选择0到37之间随机数的函数。如果它是偶数,则背景为红色。如果它很奇怪,背景是黑色的。初始背景为浅蓝色。这是我到目前为止所做的,而且它不起作用。

<html>
<head>
<title>Wheel</title>
<script type="text/javascript">
var currentNum = wheelspins();
document.body.style.backgroundColor = "#00ffff";

function wheelspins()
{
return Math.floor(Math.random() * 37);

if(currentNum % 2 == 0){
style.backgroundColor="#FF0000";
}
else if(currentNum %2 == 1){
style.backgroundColor="#000000";
}
}
</script>
</head>
<body>
<form>

<input type="text" name="Number" value="" id="wheelspins()" size="10"/>
<input type="button" value="Spin Wheel" onclick="document.getElementById('wheelspins()').value=wheelspins();"/>
</form>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

我看到两个可能的问题。首先,评估代码永远不会运行,因为函数在可以更改背景之前返回。其次,您应该在函数中编写document.body.style.background而不是style.background。将您的wheelspins()功能更改为这样,它应该有效:

function wheelspins()
{
  //If you return here, then the rest of the function won't get run
  currentNum = Math.floor(Math.random() * 37);

  if(currentNum % 2 == 0){
    document.body.style.backgroundColor="#FF0000";
  }
  else if(currentNum %2 == 1){
    document.body.style.backgroundColor="#000000";
  }
  return currentNum
}

答案 1 :(得分:0)

您的javascript存在一些问题..例如,当您返回随机数时,if-else函数的wheelspins块永远不会到达(也许您错过了一个括号? )

此外,您还不清楚要使用<input type="text" /> html完成的操作。你想在那里返回生成的随机数吗?

您还需要评估您的号码是否均匀(或奇数)。这是一个例子:

&#13;
&#13;
function wheelSpin(){
    var random = Math.floor(Math.random() * 37);
    if(random % 2 == 0){
        document.body.style.backgroundColor = "#FF0000";
    } else {
        document.body.style.backgroundColor = "#000000";
    }
}
&#13;
body{
    background-color: #00ffff;
}
&#13;
<button onclick="wheelSpin()">Spin Wheel</button>
&#13;
&#13;
&#13;