D&D Dice

Allows you to roll D&D type dice.

by sakonexus

HTML

<div class="container">
  <h1>Select the number of rolls for each dice</h1>
  <div id="dice">
    <div id="d4">
      <form name="d4-dice">
        <label for="d4-dice">D4&#160;&#160;</label>
        <input type="number" id="d4-dice" name="d4-dice" min="0" max="10">
        <button type="button" form="d4-dice" onclick="calcRoll(event)">Confirm</button>
      </form>
      <div id="d4-table">
        <table border="0" cellpadding="4" cellspacing="0" id="d4-roll-results">
        </table>
      </div>
    </div>
    <hr />
    <div id="d6">
      <form name="d6-dice">
        <label for="d6-dice">D6&#160;&#160;</label>
        <input type="number" id="d6-dice" name="d6-dice" min="0" max="10">
        <button type="button" form="d6-dice" onclick="calcRoll(event)">Confirm</button>
      </form>
      <div id="d6-table">
        <table border="0" cellpadding="4" cellspacing="0" id="d6-roll-results">
        </table>
      </div>
    </div>
    <hr />
    <div id="d8">
      <form name="d8-dice">
        <label for="d8-dice">D8&#160;&#160;</label>
        <input type="number" id="d8-dice" name="d8-dice" min="0" max="10">
        <button type="button" form="d8-dice" onclick="calcRoll(event)">Confirm</button>
      </form>
      <div id="d8-table">
        <table border="0" cellpadding="4" cellspacing="0" id="d8-roll-results">
        </table>
      </div>
    </div>
    <hr />
    <div id="d10">
      <form name="d10-dice">
        <label for="d10-dice">D10</label>
        <input type="number" id="d10-dice" name="d10-dice" min="0" max="10">
        <button type="button" form="d10-dice" onclick="calcRoll(event)">Confirm</button>
      </form>
      <div id="d10-table">
        <table border="0" cellpadding="4" cellspacing="0" id="d10-roll-results">
        </table>
      </div>
    </div>
    <hr />
    <div id="d12">
      <form name="d12-dice">
        <label for="d12-dice">D12</label>
        <input type="number" id="d12-dice" name="d12-dice" min="0" max="10">
       ...

CSS

table[id$="-roll-results"] td {
  border: 1px solid black;
}

div[id$="-table"] {
  padding: 10px 0 0;
}

JavaScript

function calcRoll(e) {
	let die = e.target.previousElementSibling.name;
  let rolls = e.target.previousElementSibling.value;
  let topRow = {};
  let bottomRow = {};
  let randomRoll = 0;
  
  if (rolls == '') {
  	rolls = 0;
  }
  
  if (die.includes("d4")) {
  	topRow = document.getElementById("d4-roll-results").insertRow(0);
    bottomRow = document.getElementById("d4-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomRow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
      	randomRoll = Math.floor(Math.random() * 4) + 1;
        bottomRow.insertCell(j + 1).innerHTML = randomRoll;
    }
  } else if (die.includes("d6")) {
  	topRow = document.getElementById("d6-roll-results").insertRow(0);
    bottomRow = document.getElementById("d6-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomRow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
      	randomRoll = Math.floor(Math.random() * 6) + 1;
        bottomRow.insertCell(j + 1).innerHTML = randomRoll;
    }
  } else if (die.includes("d8")) {
  	topRow = document.getElementById("d8-roll-results").insertRow(0);
    bottomRow = document.getElementById("d8-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomRow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
      	randomRoll = Math.floor(Math.random() * 8) + 1;
        bottomRow.insertCell(j + 1).innerHTML = randomRoll;
    }
  } else if (die.includes("d10")) {
  	topRow = document.getElementById("d10-roll-results").insertRow(0);
    bottomRow =...