Javascript退出循环提前

Question

我有一个硬币翻转程序，我正在做一个循环。问题在于它似乎很早就退出了。看一看。

$(function() { 
    $('#rollDice').click(function() { 

     var e = document.getElementById("diceSides"); 
     var diceSides = e.options[e.selectedIndex].text; 
     var diceRolls = document.getElementById('rollCount').value; 

     if (diceRolls.match(/^[\d]*$/)) {  
      if (diceRolls == "") { 
       alert ("Please fill out all forms then try again."); 

      } else { 

       $('#diceRollContainer').slideDown('slow'); 

       for (i=0;i<diceRolls;i++) { 
        var randNum = Math.floor(Math.random()*diceSides)+1; 
        var rolls = ("You rolled a " + diceSides + " sided die " + diceRolls + " times, and got the numbers "); 

        rollMinOne = rolls - 1; 
        if (i == rollMinOne) { 
         var rolls = (rolls + randNum + "."); 
        } 
        var rolls = (rolls + randNum + ", "); 

       } 
       alert (rolls); 
      } 
     } else { 
      alert ("Make sure you only enter numbers and no spaces, then try again."); 
     } 
    }); 
}); 

的问题是，程序提醒辊之前在for循环似乎完成。它为什么这样做？

Answer 1

你必须在代码中的几个错误，但解释你所看到的行为之一是，你重置每次通过循环到初始字符串的值为rolls。

一旦移出该行，你会得到一个更接近价值，但你也计算从rolls，而不是diceRollsrollsMinOne，如您预期的（这就是为什么好名字是非常重要的），这意味着如果语句从来没有（因为一个字符串减去一个数字是值NaN“不是一个数字”，这不等于什么 [甚至本身！]）。

然后，唯一的功能（而不是样式或设计）问题是，您在最后添加了一个带有逗号的值，即使您已经添加了句点。

全部放在一起：

var rolls = ("You rolled a " + diceSides + " sided die " + diceRolls + " times, and got the numbers "); 
    for (i=0;i<diceRolls;i++) { 
     var randNum = Math.floor(Math.random()*diceSides)+1; 

     rollMinOne = diceRolls - 1; 
     if (i == rollMinOne) { 
      rolls = (rolls + randNum + "."); 
     } else { 
      rolls = (rolls + randNum + ", "); 
     } 

虽然与其他答案提到，有更容易和更快的方式来得到相同的结果，我觉得理解为什么代码不能正常工作是非常重要的。

Answer 2

我觉得无聊，并实施了代码，这似乎是用最少的测试工作

<script> 
    $(function() { 
     $('#rollDice').click(function() { 

      var diceSides = $('#dice-sides').val(); 
      var diceRolls = $('#roll-count').val(); 

      if (diceRolls.match(/^[\d]*$/)) {  
       if (diceRolls == "") { 
        alert ("Please fill out all forms then try again."); 

       } else { 
        $('#output').text(
         "You rolled a " + diceSides + 
         " sided die " + diceRolls + 
         " times, and got the numbers "); 

        for (i=0; i<diceRolls; i++) { 

         var randNum = Math.floor(Math.random()*diceSides)+1; 

         $('#output').append(randNum); 
        } 
       } 
      } else { 
       alert ("Make sure you only enter numbers and no spaces, then try again."); 
      } 
     }); 
    }); 
</script> 
<form onsubmit="return false;"> 
    <label>Sides</label> 
    <input id="dice-sides" type="text" value="6"> 
    <label>Count</label> 
    <input id="roll-count" type="text" value="1"> 
    <button id="rollDice">Roll</button> 
</form> 
Rolls 
<div id="output"> 

</div>