2

I made a simple html and javascript file to help me roll dice in DND. Currently this seems to be working fine

index.html

  <form>
    <input type="number" id="diceType"> dice type (d20, d12 ect ...)<br>
    <input type="number" id="diceNumber"> number of dice<br>
    <input type="number" id="mod"> mod<br>
  </form> 
  <button type="button" onclick="roll(document.getElementById('diceType').value, document.getElementById('diceNumber').value, document.getElementById('mod').value)">
 Roll
 </button>

index.js

const roll = function(diceType, diceNumber, mod){
  let total = 0;
  let div1 = document.getElementById("rolling");
  div1.innerHTML = '';
  for(let i = 0; i < diceNumber; i++){
    let roll = Math.floor(Math.random() * (diceType - 1 + 1) ) + 1;
    total += roll;
    div1.innerHTML += 'you rolled ' + roll + "<br>";
  }
  let result = parseInt(total) + parseInt(mod);
    document.getElementById("youRolled").innerHTML =
  'You rolled ' + diceNumber + 'D' + diceType + ' modifier was ' + mod + ' total: ' + result
};

However, I find this a little clunky as I want to have a selection drop down list, have the user select the option, then pass that as a parameter to the roll function.

I have tried using 

<select>
  <option value="100">D100</option>
  <option value="20">D20</option>
  <option value="12">D12</option>
  <option value="10">D10</option>
  <option value="8">D8</option>
  <option value="6">D6</option>
  <option value="4">D4</option>
</select>

I have tried a few things but I was wondering how would I access say

<option value="12">D12</option>

that value then pass it into 

onclick="roll()"

as one of the parameters. That why I figure it would prevent me or others from selecting a million different dice combinations to enter. Also, I do know there is other generators out there, but was looking to try and make my own for fun.

  • Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – Vikasdeep Singh Apr 25 '18 at 04:20

2 Answers2

1

Inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead, eg: https://developer.mozilla.org/en/DOM/element.addEventListener

Like this:

const fields = ['diceType', 'diceNumber', 'mod'].map(id => document.getElementById(id));
document.querySelector('button')
  .addEventListener('click', () => roll(...fields.map(field => field.value)));

And for the roll function:

const roll = function(diceType, diceNumber, mod){
  const selectedValue = document.querySelector('select').value;
  let total = 0;
  // ...

values are strings, so if needed, to turn selectedValue into a number, call Number on it while defining the variable:

  const selectedValue = Number(document.querySelector('select').value);
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • For the select you need to parse it's value to number `const selectedValue = Number(document.querySelector('select').value);` – HMR Apr 25 '18 at 04:27
0

In your code you have to add id to the <select> tag If you have a select element that looks like this:

<select id="diceValue">
  <option value="100">D100</option>
  <option value="20">D20</option>
  <option value="12">D12</option>
  <option value="10">D10</option>
  <option value="8">D8</option>
  <option value="6">D6</option>
  <option value="4">D4</option>
</select>

Running this code:

var e = document.getElementById("diceValue");
var value = e.options[e.selectedIndex].value;

Would make value to be option value. If what you actually want is D100, then do this:

var e = document.getElementById("diceValue");
var value = e.options[e.selectedIndex].text;

Which would make value be D100.

To pass the value inside the function just use :

onClick = roll(document.getElementById('diceValue').value ,..other arguments)
souravlahoti
  • 716
  • 2
  • 8
  • 29