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>

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

但是，我发现这有点笨重，因为我想要一个选择下拉列表，让用户选择该选项，然后将其作为参数传递给滚动功能。

我尝试过使用

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

我尝试了一些事情，但我想知道如何访问说

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

Answer 2

在您的代码中，您必须将id添加到<select>标记中如果你有一个如下所示的select元素：

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

运行此代码：

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

会使价值成为期权价值。如果您真正想要的是D100，那么请执行以下操作：

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

这将使价值成为D100。

要传递函数内部的值，只需使用：

onClick = roll(document.getElementById('diceValue').value ,..other arguments)

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

2 个答案: