選擇擲出多少個骰子擲骰子

我想讓我的腳本允許用戶選擇在我的輸入字段中使用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，幫助我看到邏輯沒有混亂。再一次，**非常感謝你！ –

選擇擲出多少個骰子擲骰子

回答

相關問題