passing option value in html as javascript parameter

Question

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? — Vikasdeep Singh
– Vikasdeep Singh, Commented Apr 25, 2018 at 4:20

CertainPerformance · Accepted Answer · 2018-04-25 04:33:55Z

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

edited Apr 25, 2018 at 4:33

answered Apr 25, 2018 at 4:23

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HMR Over a year ago

For the select you need to parse it's value to number const selectedValue = Number(document.querySelector('select').value);

souravlahoti · Accepted Answer · 2018-04-25 04:26:21Z

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)

edited Apr 25, 2018 at 4:26

answered Apr 25, 2018 at 4:19

souravlahoti

7362 gold badges9 silver badges33 bronze badges

2 Comments

Vikasdeep Singh Over a year ago

Better to suggest this answer directly instead of copying that answer : stackoverflow.com/a/1085810/631803

souravlahoti Over a year ago

@VicJordan Thanks for the link for reference. Just reformatted the answer for the user's requirement.

Collectives™ on Stack Overflow

passing option value in html as javascript parameter

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related