Javascript无法读取number类型输入框修改后的值问题求助

问题根源 #

你在全局作用域执行了var numDice = document.getElementById("num-dice").value，这行代码只会在页面首次加载时运行一次，拿到的是输入框初始默认值1。后续你修改输入框的数值时，全局的numDice变量不会自动更新，所以rollDice函数一直使用的是初始的旧值。

你猜测的需要把输入框包裹在form中、修改按钮为submit类型的方案完全不需要，这个问题和表单提交逻辑无关。

修复方法 #

把读取输入框值的逻辑移动到rollDice函数内部，每次点击按钮执行掷骰子逻辑时，重新读取输入框的最新值即可。另外注意三个额外问题：

• 输入框的value属性默认是字符串类型，最好转换为数字后再参与计算
• 你原代码中的diceType变量没有定义，需要补充赋值（示例默认用6面骰子的数值6，你可以按需调整）
• 原代码把随机数生成逻辑放在了循环外面，会导致多个骰子的点数完全相同，要把随机数生成放到循环内才符合正常掷骰子的逻辑

修正后的JS代码 #

var displayScreen = document.getElementById("display-message");
var rollButton = document.getElementById("roll-button");
// 提前存储DOM元素引用，避免重复查询DOM
var numDiceInput = document.getElementById("num-dice");
var bonusInput = document.getElementById("bonus");
// 示例配置为6面骰，可按需调整为动态取值
var diceType = 6;
var diceTotal = [];

rollButton.addEventListener("click", rollDice);

function displayMessage() {
  displayScreen.innerText = diceTotal[0];
}

function rollDice() {
  // 每次执行时读取输入框最新值并转为数字
  var numDice = Number(numDiceInput.value);
  var bonus = Number(bonusInput.value);
  var result = 0;

  for (var i = 0; i < numDice; i++) {
    // 每次循环生成新的随机点数
    var roll = Math.floor(Math.random() * diceType) + 1;
    result += roll;
  }
  // 加上配置的加成数值
  result += bonus;
  diceTotal[0] = result;

  displayMessage();
}

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