如何在HTML中传递选项值作为JavaScript参数？附DND掷骰子代码

嘿，我看你正在做一个DND的掷骰子工具，已经有了基础代码，现在想搞清楚怎么把表单里的选项值传给JavaScript函数对吧？我给你整理了几种实用的方法，还有完善后的代码，你可以参考下：

方式1：顺着你的思路完善——直接在onclick里传值 #

你原本的代码已经在尝试用document.getElementById获取输入值作为参数，我把它补全并优化了下，让它能正常运行：

<form>
  <input type="number" id="diceType" placeholder="比如20代表d20"> 骰子类型（d20, d12等）<br>
  <input type="number" id="diceNumber" placeholder="比如3代表掷3个"> 骰子数量<br>
  <input type="number" id="mod" placeholder="比如+5或者-2"> 修正值<br>
</form>
<button type="button" onclick="roll(
  parseInt(document.getElementById('diceType').value),
  parseInt(document.getElementById('diceNumber').value),
  parseInt(document.getElementById('mod').value) || 0
)">掷骰子</button>

<script>
function roll(diceType, diceCount, modifier) {
  // 先做个简单的输入验证，避免无效值搞出问题
  if (isNaN(diceType) || diceType < 2 || isNaN(diceCount) || diceCount < 1) {
    alert("请输入有效的骰子类型（至少d2）和数量（至少1个）！");
    return;
  }
  
  let total = 0;
  const rollResults = [];
  
  // 模拟掷骰子的过程
  for (let i = 0; i < diceCount; i++) {
    const singleRoll = Math.floor(Math.random() * diceType) + 1;
    rollResults.push(singleRoll);
    total += singleRoll;
  }
  
  // 加上修正值
  total += modifier;
  
  // 把结果友好地展示出来
  alert(`掷骰结果：${rollResults.join(" + ")} ${modifier ? (modifier > 0 ? "+" : "") + modifier : ""} = ${total}`);
}
</script>

这里的关键是：用parseInt把输入框的字符串值转成数字（不然会变成字符串拼接），直接把这些转好的值作为参数传给roll函数，函数里就能直接用啦。

方式2：更推荐的无侵入式写法——用事件监听 #

如果不想把JS代码混在HTML里，这种方式更清晰，后期维护也方便：

<form id="diceForm">
  <input type="number" id="diceType" placeholder="比如20代表d20"> 骰子类型（d20, d12等）<br>
  <input type="number" id="diceNumber" placeholder="比如3代表掷3个"> 骰子数量<br>
  <input type="number" id="mod" placeholder="比如+5或者-2"> 修正值<br>
</form>
<button type="button" id="rollBtn">掷骰子</button>

<script>
// 先拿到按钮元素
const rollButton = document.getElementById('rollBtn');

// 给按钮加点击事件监听
rollButton.addEventListener('click', function() {
  // 获取并转换输入值
  const diceType = parseInt(document.getElementById('diceType').value);
  const diceCount = parseInt(document.getElementById('diceNumber').value);
  const modifier = parseInt(document.getElementById('mod').value) || 0;
  
  // 调用掷骰函数，把参数传进去
  roll(diceType, diceCount, modifier);
});

function roll(diceType, diceCount, modifier) {
  // 验证和掷骰逻辑和上面一样
  if (isNaN(diceType) || diceType < 2 || isNaN(diceCount) || diceCount < 1) {
    alert("请输入有效的骰子类型（至少d2）和数量（至少1个）！");
    return;
  }
  
  let total = 0;
  const rollResults = [];
  
  for (let i = 0; i < diceCount; i++) {
    const singleRoll = Math.floor(Math.random() * diceType) + 1;
    rollResults.push(singleRoll);
    total += singleRoll;
  }
  
  total += modifier;
  
  alert(`掷骰结果：${rollResults.join(" + ")} ${modifier ? (modifier > 0 ? "+" : "") + modifier : ""} = ${total}`);
}
</script>

这种方式把HTML结构和JS逻辑完全分开，点击按钮时先获取所有输入值，再传给roll函数，代码看起来更清爽。

方式3：偷懒小技巧——函数内部直接取值 #

要是觉得传参数麻烦，也可以让roll函数自己去拿表单的值，这样按钮点击时只需要调用roll()就行：

<form>
  <input type="number" id="diceType" placeholder="比如20代表d20"> 骰子类型（d20, d12等）<br>
  <input type="number" id="diceNumber" placeholder="比如3代表掷3个"> 骰子数量<br>
  <input type="number" id="mod" placeholder="比如+5或者-2"> 修正值<br>
</form>
<button type="button" onclick="roll()">掷骰子</button>

<script>
function roll() {
  // 直接在函数里获取输入值
  const diceType = parseInt(document.getElementById('diceType').value);
  const diceCount = parseInt(document.getElementById('diceNumber').value);
  const modifier = parseInt(document.getElementById('mod').value) || 0;
  
  // 验证逻辑
  if (isNaN(diceType) || diceType < 2 || isNaN(diceCount) || diceCount < 1) {
    alert("请输入有效的骰子类型（至少d2）和数量（至少1个）！");
    return;
  }
  
  // 掷骰逻辑
  let total = 0;
  const rollResults = [];
  
  for (let i = 0; i < diceCount; i++) {
    const singleRoll = Math.floor(Math.random() * diceType) + 1;
    rollResults.push(singleRoll);
    total += singleRoll;
  }
  
  total += modifier;
  
  alert(`掷骰结果：${rollResults.join(" + ")} ${modifier ? (modifier > 0 ? "+" : "") + modifier : ""} = ${total}`);
}
</script>

这种方式适合逻辑简单的场景，不用操心参数传递的问题，函数自己搞定所有取值工作。

几个小提醒 #

• 一定要用parseInt或者Number()转换输入值，输入框默认返回的是字符串，直接用会出问题（比如把1+2变成"12"）。
• 加个输入验证很有必要，避免用户输入0或者负数导致掷骰逻辑出错。
• 修正值如果允许为空，用|| 0处理，这样空值会被当成0计算，不会影响结果。

内容的提问来源于stack exchange，提问作者user2785628