Choosing how many dice to roll in JavaScript Dice Roller

Question

I am trying to get my script to allow the user to choose how many dice they would like to roll (1-40) in my input field, with the button onClick() function capturing that input-number and displaying/creating "dice" div's.

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

I have added two different solutions listed as V(1.1) and V(1.2) as I am only wanting to accomplish this using strictly JavaScript and HTML.

[EDIT] Both versions have been tested, though I cannot seem to get the logic right in order for either of them to work properly.

How can I proceed to capture the input-value and create/display multiple dice div's?

Have you tried running both your solutions? What happens when you do? — josephmbustamante, Jun 13 '17 at 17:14
You can use the [createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) method to dynamically create the divs using js. — Rho, Jun 13 '17 at 17:21
@josephmbustamante I have, although I cannot get either of them to work properly. I just left them as earlier precursor versions so that others might see something I do not-- (I will make sure to update my question with those notices so I don't waste anyone's time.) — David Ewaliko, Jun 13 '17 at 17:25

score 2 · Accepted Answer · answered Jun 13 '17 at 17:25

Simplified version of your original attempt:

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>

Thank you so much!!! The simplified version runs perfectly in my script! Readability is 10/10 and helps me to see the logic without clutter. Again, **thank you** very much! — David Ewaliko, Jun 13 '17 at 17:33

Choosing how many dice to roll in JavaScript Dice Roller

1 Answers1