选择掷出多少个骰子掷骰子

我想让我的脚本允许用户选择在我的输入字段中使用onClick（）按钮滚动（1-40）多少个骰子，函数捕获输入数字并显示/创建“dice”div。选择掷出多少个骰子掷骰子

<script> 
    // ORIGINAL DICE ROLLER CODE, KEEP JUST IN CASE!!!// 
     function rollDice(){ 
     var numDice = document.getElementById("diceNum").value; 
     var status = document.getElementById("status"); 
     var d1 = Math.floor(Math.random() * 6) + 1; 
     var diceRoll = d1; 

     var container = document.getElementById("diceNum").value; 

     for (var i = 0; i < diceNum.value; i++){ 
      //LOOP THROUGH APPHENDED INPUT VALUE AND POPULATE CONTAINER DIV// 
      container.innerHTML = '<div class="dice">+diceRoll+</div>'; 
     }; 
     numDice.innerHTML = diceRoll; 
     status.innerHTML = "You rolled "+diceRoll+".";+ 
     }; 


    // DICE ROLLER V(1.1 MOD) // 
     function showdice() { 
     var dicenum = prompt("how many dice would you like to roll?"); 
     var diceint = Math.round(dicenum); 
     var diceroll, results = ''; 

     if (diceint >= "50") { 
      alert("we don't have that many dice"); 
     } 

     else if (diceint <= "0") { 
      alert("you need to roll at least one die"); 
     } 

     else 
      for (i = 1; i <= diceint; i++) { 
      diceroll = Math.ceil(Math.random() * 6); 
      results += diceroll + ','; 
      } 
      alert(results); 
     } 


    // DICE ROLLER V(1.2 MOD) // 
     function showdice() { 
     var dicenum = prompt("how many dice would you like to roll?"); 
     var diceint = Math.round(dicenum); 
     var results = []; 

     if (diceint >= "50") { 
      alert("we don't have that many dice"); 
     } 

     else if (diceint <= "0") { 
      alert("you need to roll at least one die"); 
     } 

     else 
      for (i = 0; i < diceint; i++) { 
      results[i] = Math.ceil(Math.random() * 6); 
      } 
      alert(results.join(', ')); 
     } 
    </script> 
    </head> 

    <body> 
    <br/><br/><br/> 

     <form class="" action="index.html" method="post"> 
     <h4>Choose number of dice to roll</h4> 
     <p>[1 - 40]</p> 
     <br/> 
     <input id="diceNum" type="text" name="DiceNumber" placeholder=""> 
     <br/> 
     </form> 

     <br/><br/> 

     <div id="dieContainer" class="dice">0</div> 
     <br/><br/> 
     <button onclick="rollDice()" style="margin-left: 20px; margin-right: 20px;">Roll Dice</button> 
     <h2 id="status" style="clear:left;"></h2> 
    </body>

我已经加入列为V（1.1）和V（1.2）两种不同的解决方案，我只希望这种严格使用JavaScript和HTML来完成。

[编辑]这两个版本都已经过测试，但我似乎无法获得正确的逻辑，以使它们中的任何一个都能正常工作。

如何继续捕获输入值并创建/显示多个Dice DIV？

来源

2017-06-13 David Ewaliko

你试过同时运行您的解决方案？当你做什么时会发生什么？ – josephmbustamante

您可以使用[createElement]（https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement）方法使用js动态创建div。 – Rho

@josephmbustamante我有，但我无法让他们任何一个正常工作。我只是把它们作为更早版本的前体版本，以便其他人可能会看到我没有的东西 - （我会确保用这些通知更新我的问题，所以我不会浪费任何人的时间。） –

简化您的原始尝试的版本：

function rollDice() { 
 
    var numDice = document.getElementById("diceNum").value; 
 
    var container = document.getElementById("dieContainer"); 
 

 
    container.innerHTML = ""; 
 

 
    for (var i = 0; i < numDice; i++) { 
 
    var diceRoll = Math.floor(Math.random() * 6) + 1; 
 
    container.innerHTML += '<div class="dice">' + diceRoll + '</div>'; 
 
    }; 
 
};

<h4>Choose number of dice to roll</h4> 
 
<input id="diceNum" type="text" value="3"> 
 
<button onclick="rollDice()">Roll Dice</button> 
 
<div id="dieContainer" class="dice"></div>

来源

2017-06-13 17:25:47 Will

非常感谢！简化版在我的脚本中完美运行！可读性为10/10，帮助我看到逻辑没有混乱。再一次，**非常感谢你！ –

选择掷出多少个骰子掷骰子

回答

相关问题