javascript - 在 html 中将选项值作为 javascript 参数传递

Question

我制作了一个简单的 html 和 javascript 文件来帮助我在 DND 中掷骰子。目前这似乎工作正常

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>

索引.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
};

但是，我觉得这有点笨拙，因为我想要一个选择下拉列表，让用户选择选项，然后将其作为参数传递给 roll 函数。

我试过用

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

我已经尝试了一些东西，但我想知道我将如何访问 say

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

然后将该值传递给

onclick="roll()"

作为参数之一。这就是为什么我认为它会阻止我或其他人选择一百万个不同的骰子组合来输入。另外，我确实知道那里还有其他发电机，但我一直想尝试自己制作，只是为了好玩。

Answer 1

内联事件处理程序本质上是 HTML 标记内的 eval - 它们是不好的做法，会导致分解不良、难以管理的代码。认真考虑使用 JavaScript 附加您的事件，例如:https://developer.mozilla.org/en/DOM/element.addEventListener

像这样:

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

对于滚动功能:

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

value 是字符串，因此如果需要，要将 selectedValue 转换为数字，在定义变量时对其调用 Number:

  const selectedValue = Number(document.querySelector('select').value);