Wählen, wie viele Würfel in JavaScript Würfelroller

Ich versuche, mein Skript zu ermöglichen, den Benutzer zu wählen, wie viele Würfel möchten Sie (1-40) in meinem Eingabefeld mit der Schaltfläche onClick() rollen Funktion, die diese Eingabe-Nummer erfasst und "Würfel" Divs anzeigt/erzeugt.Wählen, wie viele Würfel in JavaScript Würfelroller

<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>

Ich habe noch zwei verschiedene Lösungen als V aufgelistet (1.1) und V (1.2), da ich nur bin zu wollen dies mit streng JavaScript und HTML erreichen.

[EDIT]Beide Versionen getestet wurden, obwohl ich nicht für eine von ihnen die Logik rechts, um scheinen, richtig zu arbeiten.

Wie kann ich fortfahren, den Eingabewert zu erfassen und mehrere Würfel Divs zu erstellen/anzuzeigen?

Quelle

2017-06-13 David Ewaliko

Haben Sie versucht, sowohl Ihre Lösungen laufen? Was passiert, wenn du es tust? – josephmbustamante

Sie können die Methode [createElement] (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) verwenden, um divs mit js dynamisch zu erstellen. – Rho

@josephmbustamante Ich habe, obwohl ich nicht beide von ihnen richtig funktionieren kann. Ich habe sie einfach als frühere Vorläuferversionen zurückgelassen, damit andere etwas sehen, was ich nicht-- (Ich werde sicherstellen, dass ich meine Frage mit diesen Hinweisen aktualisiere, damit ich keine Zeit verschwenden werde.) –

Vereinfachte Version des ursprünglichen Versuch:

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>

Quelle

2017-06-13 17:25:47 Will

Vielen Dank !!! Die vereinfachte Version läuft perfekt in meinem Skript! Lesbarkeit ist 10/10 und hilft mir, die Logik ohne Unordnung zu sehen. Nochmals, ** vielen Dank ** sehr! –

Wählen, wie viele Würfel in JavaScript Würfelroller

Antwort

Verwandte Themen