在一个按钮中用随机值填充多个输入点击

Question

我正尝试使用jQuery为在线角色创建者应用程序构建用户界面。我试图通过单击一次按钮随机生成角色统计数据。这是我第一次在一个非平凡的应用程序中使用jQuery。

问题是，当我点击按钮时，没有数字在窗体内部生成。如果我删除禁用的属性，它仍然不起作用，所以我知道这不是问题。

如果我想刺探它，我会猜测jQuery中的$（）不喜欢采用变量，但如果是这种情况，我不知道如何正确的方式来做到这一点。只需在jQuery网站上点击一下即可填写多个表单的示例对此目的没有用处，因为我需要确保单独调用dice函数以填充每个表单。

我的JavaScript代码如下所示：

$(document).ready(function(){ 

    //stats as an array 
    stats = ["#smarts", "#rwp", "#driving", "#cool", "#bod", "#luck", "#looks", "#bonk"]; 

    //roll dice function 
    function dice (x, n, y) { 
     var result = 0; 
     for(i = 0; i < x; i++) { 
      result = result + Math.floor((Math.random() * n) + 1); 
     } 
     result = result + y; 
     return result; 
    } 

    //roll each stat function 
    function rollStats(stats) { 
     for(stat in stats) { 
      $(stat).val(dice(1, 6, 0)); 
     } 
    } 

    //on button click roll each stat 
    $("#stats").click(rollStats(stats)); 

}); 

以供参考我的HTML表单的相关部分看起来是这样的：

<form class="create-teenager"> 
     Smarts: 
     <input type="number" name="smarts" id="smarts" disabled /> 
     <br/><br/> 

     Relationship with Parents: 
     <input type="number" name="rwp" id="rwp" disabled /> 
     <br/><br/> 

     Driving: 
     <input type="number" name="driving" id="driving" disabled /> 
     <br/><br/> 

     Cool: 
     <input type="number" name="cool" id="cool" disabled /> 
     <br/><br/> 

     Bod: 
     <input type="number" name="bod" id="bod" disabled /> 
     <br/><br/> 

     Luck: 
     <input type="number" name="luck" id="luck" disabled /> 
     <br/><br/> 

     Looks: 
     <input type="number" name="looks" id="looks" disabled /> 
     <br/><br/> 

     Bonk: 
     <input type="number" name="bonk" id="bonk" disabled /> 
     <br/><br/> 

     <button id="stats">Roll Stats</button> 
    </form> 

Answer 1

首先，我建议你从窗体中拉出按钮或防止默认。

试试这个fiddle。

<form class="create-teenager"> 
    Smarts: 
    <input type="number" name="smarts" id="smarts" disabled /> 
    <br/><br/> 

    Relationship with Parents: 
    <input type="number" name="rwp" id="rwp" disabled /> 
    <br/><br/> 

    Driving: 
    <input type="text" name="driving" id="driving" /> 
    <br/><br/> 

    Cool: 
    <input type="number" name="cool" id="cool" /> 
    <br/><br/> 

    Bod: 
    <input type="number" name="bod" id="bod" disabled /> 
    <br/><br/> 

    Luck: 
    <input type="number" name="luck" id="luck" disabled /> 
    <br/><br/> 

    Looks: 
    <input type="number" name="looks" id="looks" disabled /> 
    <br/><br/> 

    Bonk: 
    <input type="number" name="bonk" id="bonk" disabled /> 
    <br/><br/> 

卷统计

并尝试这个脚本

$(document).ready(function(){ 

    //stats as an array 
    stats = ["#smarts", "#rwp", "#driving", "#cool", "#bod", "#luck", "#looks", "#bonk"]; 

    //roll dice function 
    function dice (x, n, y) { 
     var resultNumber = 0; 
     for(i = 0; i < x; i++) { 
      resultNumber = Math.floor((Math.random() * n) + 1) + y; 
     } 
     console.log(resultNumber); 
     return resultNumber; 
    } 

    //on button click roll each stat 
    $("#stats").click(function() { 
    for(stat in stats) { 
     $(stats[stat]).val(dice(1, 6, 0)); 
    } 
    }); 
}); 

Answer 2

你在它需要是错误的使用：

for(stat in stats) { 
    $(stats[stat]).val(dice(1, 6, 0)); 
}