diceroll

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fdf;
  font: 30px sans-serif;
}

#cast, #rollbutton {
    width: 100%;
    height: 1.5em;
    font-size: 150%;
    font-family: serif;
}
#cast{
    font-size: 200%;
}
input[type="checkbox"], input[type="radio"], select{
    margin-left: 10px;
    width: 30px;
    height: 30px;
}
select{width: 70%; font-size: 20px; margin-bottom: 0.5em;}

jsdoit.html

<form name="settings">
    
<p><input type="text" id="cast" /></p>
<p><input type="button" value="roll" id="rollbutton" /></p>
<p id="casttext">(none)</p>
<p id="setdiceandfaces">
        <select id="selectd">
        <option value="1d6">1D6</option>
        <option value="2d6">2D6</option>
        <option value="3d6">3D6</option>
    </select>
    <input type="hidden" id="hiddend" />
    </p>
<p id="checkifuseunicode"><input type="checkbox" id="useunicode" value="yes" />⚅</p>

</form>

jsdoit.js

function diecast(faces) {return Math.floor((Math.random() * faces) + 1);}
function roll(dice,faces) {
  var i; var sum = 0; var display = '';
  for(i = 0; i < dice; i++) {
    var d = diecast(faces);
    sum += d;
    display += '[' + d +']';
  }
  //display = display.substring(0, display.length);
  if(dice > 1){display += ':' + sum;}
 
  return display;
}
 
function forCopyAndPaste(dice,faces){
    var r = roll(dice,faces); var r2 = '';
  document.getElementById('casttext').innerHTML = r;
    if(document.getElementById('useunicode').checked){
    r2 = r;
    r2 = r2.replace(/\[1\]/g, '\u2680');
    r2 = r2.replace(/\[2\]/g, '\u2681');
    r2 = r2.replace(/\[3\]/g, '\u2682');
    r2 = r2.replace(/\[4\]/g, '\u2683');
    r2 = r2.replace(/\[5\]/g, '\u2684');
    r2 = r2.replace(/\[6\]/g, '\u2685');
        r2 = r2.replace(/\:/, ' = ');
    }else{r2=r;}
    document.getElementById('cast').value = r2;
}

window.onload = function(){
    document.getElementById('selectd').onchange = function(){
        document.getElementById('hiddend').value = this.value;
    };
    document.getElementById('rollbutton').onclick = function(){
        var dice=0, faces=0;
        var dicesettings = document.getElementById('selectd').value.split('d');
        dice = dicesettings[0]; faces = dicesettings[1];
        forCopyAndPaste(dice,faces);
    };
    document.getElementById('cast').onclick = function(){
        this.select();
    };
};