为什么我的Button有脚本有时无法工作？

我用Javascript生成了一个简单的脚本，它生成一个介于0-5 + 1（骰子）之间的随机数。我的问题是，当我按下按钮时，它没有做任何事情，迫使我多次垃圾按钮在骰子出现之前。为什么我的Button有脚本有时无法工作？

我到处寻找，但无法找到任何问题可能是什么。这里是我的代码：

<html> 
<head> 
</head> 
<body> 
<button type="button" onclick="spin()">Click here to roll the Dice!</button> 
<img src="" id="demo"> 
<script> 
function spin() { 
     if (Dice() == 1) { 
      document.getElementById("demo").src="http://i.imgur.com/QRTs9Ax.png"; 
     } 
     else if (Dice() == 2) { 
      document.getElementById("demo").src="http://i.imgur.com/OMz1o8U.png"; 
     } 
     else if (Dice() == 3) { 
      document.getElementById("demo").src="http://i.imgur.com/J4Xx2yO.png"; 
     } 
     else if (Dice() == 4) { 
      document.getElementById("demo").src="http://i.imgur.com/CJb2ojk.png"; 
     } 
     else if (Dice() == 5) { 
      document.getElementById("demo").src="http://i.imgur.com/8W6UL5O.png"; 
     } 
     else if (Dice() == 6) { 
      document.getElementById("demo").src="http://i.imgur.com/NGxBete.png"; 
     } 
} 

</script> 
<script> 
function Dice() { 
    return Math.floor(Math.random() * 6) + 1; 
} 
</script> 
</body> 
</html>

来源

2016-10-30 sidosedai323

Store上的dice()值一次给一个变量，并与if语句检查。您每次都重新生成该值，因此无法保证在检查时您将获得当前值。

~~此外，正如paolo所述，Math.floor(Math.random() * 6) + 1;可能会返回7。~~

<html> 
<head> 
</head> 
<body> 
<button type="button" onclick="spin()">Click here to roll the Dice!</button> 
<img src="" id="demo"> 
<script> 
function spin() { 
    var dice = Dice(); 
     if (dice == 1) { 
      document.getElementById("demo").src="http://i.imgur.com/QRTs9Ax.png"; 
     } 
     else if (dice == 2) { 
      document.getElementById("demo").src="http://i.imgur.com/OMz1o8U.png"; 
     } 
     else if (dice == 3) { 
      document.getElementById("demo").src="http://i.imgur.com/J4Xx2yO.png"; 
     } 
     else if (dice == 4) { 
      document.getElementById("demo").src="http://i.imgur.com/CJb2ojk.png"; 
     } 
     else if (dice == 5) { 
      document.getElementById("demo").src="http://i.imgur.com/8W6UL5O.png"; 
     } 
     else if (dice == 6) { 
      document.getElementById("demo").src="http://i.imgur.com/NGxBete.png"; 
     } 
} 

</script> 
<script> 
function Dice() { 
    return Math.floor(Math.random() * 6) + 1; 
} 
</script> 
</body> 
</html>

来源

2016-10-30 21:52:55 mseifert

~~因为Math.floor(Math.random() * 6) + 1;可以返回7。~~

编辑

Math.floor(Math.random() * 6) + 1;可以根据Mozilla Developers因为Math.random()不包括1和Math.floor刚刚晋级的价值，所以你永远recive 1和6之间的值不会返回7。

问题是，你用if (Dice() == x)启动函数，所以它会返回所有is语句的不同值。你必须建立一个switch这样的：

function spin() { 
    switch (Dice()) { 
    case 1: 
     document.getElementById("demo").src = "http://i.imgur.com/QRTs9Ax.png"; 
     break; 
    case 2: 
     document.getElementById("demo").src = "http://i.imgur.com/OMz1o8U.png"; 
     break; 
    case 3: 
     document.getElementById("demo").src = "http://i.imgur.com/J4Xx2yO.png"; 
     break; 
    case 4: 
     document.getElementById("demo").src = "http://i.imgur.com/CJb2ojk.png"; 
     break; 
    case 5: 
     document.getElementById("demo").src = "http://i.imgur.com/8W6UL5O.png"; 
     break; 
    case 6: 
     document.getElementById("demo").src = "http://i.imgur.com/NGxBete.png"; 
     break; 
    }

来源

2016-10-30 21:49:59 paolobasso

我不认为这是可以返回7.我肯定能1之间返回值6，请参阅：http://stackoverflow.com/a/4960020/1333836 –

你试图让您的随机数从地板后+ 1递增它返回0。但是，当Math.random()准确地返回1.0时，您的乘法将导致完全6，该地址将变为6，然后将+ 1添加到它，使其成为7。

取而代之，只有多个您的随机数5。

return Math.floor(Math.random() * 5) + 1;

或者，更简单地说，就是使用Math.ceil()。这将总是四舍五入到最接近的整数。

return Math.ceil(Math.random() * 6);

来源

2016-10-30 21:53:07 Soviut

我不认为这可以返回7.我是积极的，它可以返回1到6之间的值，请参阅：http://stackoverflow.com/a/4960020/1333836'Math.random（）'不包括1. –

@KaloyanKosev如果这是情况下，为什么不是功能始终工作？很明显，无论是高边界还是低边界值都会生成。 – Soviut

我猜测这个函数是在每个if语句中调用的。所以共有6次。在每次调用期间，它会返回不同的值。它可能根本无法满足任何给定步骤的条件。 –

你打电话Dice()函数在其他每个if语句。

我创建a fiddle在那里你可以在控制台，它已经产生的数字上看到的，但你的旋转功能会是这样的：

function spin() { 
    var number = Dice(); 
    console.log(number); 
    switch (number) { 
    case 1: 
     document.getElementById("demo").src="http://i.imgur.com/QRTs9Ax.png"; 
     break; 
    case 2: 
     document.getElementById("demo").src="http://i.imgur.com/OMz1o8U.png"; 
     break; 
    case 3: 
     document.getElementById("demo").src="http://i.imgur.com/J4Xx2yO.png"; 
     break; 
    case 4: 
     document.getElementById("demo").src="http://i.imgur.com/CJb2ojk.png"; 
     break; 
    case 5: 
     document.getElementById("demo").src="http://i.imgur.com/8W6UL5O.png"; 
     break; 
    case 6: 
     document.getElementById("demo").src="http://i.imgur.com/NGxBete.png"; 
     break; 
    } 
}

你也可能得到相同数量的多次，因为它是随机的。

来源

2016-10-30 21:57:11

仅仅因为Dice()没有静态值并且可能与每个if语句返回不同的值，所以也可能返回与多个if相同的随机数。

因此将商品生成的数字存储在变量中，并根据需要进行if语句。

以下示例基于从imgs数组中选择随机图像，并应按照您的代码执行任务。

//add images what ever. 
var imgs = [ 
      "http://i.imgur.com/QRTs9Ax.png", 
      "http://i.imgur.com/OMz1o8U.png", 
      "http://i.imgur.com/J4Xx2yO.png", 
      "http://i.imgur.com/CJb2ojk.png", 
      "http://i.imgur.com/8W6UL5O.png", 
      "http://i.imgur.com/NGxBete.png" 
      ]; 
    function spin() { 
     var d = Dice(); //store the number in a variable 
     //Dice(5); ===> if you want the max random number will be 5 
     var i = d-1; //to get the right position in array 
     if(imgs[i])document.getElementById("demo").src = imgs[i]; 
     //Also if you want additional statements use if(d == 1){}else if(d == 2){} 
    } 

    function Dice(max){ 
    max = max || imgs.length; 
    return Math.floor(Math.random() * max) + 1; 
    }

来源

2016-10-30 22:24:04

为什么我的Button有脚本有时无法工作？

回答

相关问题