document.getElementById为何输出到错误的HTML span元素？

你编写的浏览器内骰子程序存在三个核心问题，导致RollFinalOutput显示undefined且结果乱显示：

1. 按钮点击事件逻辑错误 #

按钮的onclick中使用document.getElementById('xxx').innerHTML = TestRoll()，但TestRoll()函数没有返回值，会直接将undefined赋值给目标元素的innerHTML；同时DisplayFinalResult函数已经在主动修改三个span的内容，这就造成了重复操作，导致结果出现在未指定的位置。

2. RollFinalOutput被错误定义为数组 #

在DisplayFinalResult函数中，你将RollFinalOutput赋值为[FinalResultArray.join("")]，使其成为包含单个字符串的数组。虽然JavaScript在拼接时会自动转换为字符串，但这种写法冗余且容易造成混淆，直接赋值为字符串即可。

3. 随机数生成范围不完整 #

Math.floor(Math.random() * (max - min)) + min的写法会导致生成的随机数范围是[min, max-1]，当你传入0和9时，只能生成0-8的数字，无法取到9。需要调整为Math.floor(Math.random() * (max - min + 1)) + min才能覆盖0-9的所有整数。

修正后的JavaScript代码 #

const FinalResultArray = [0, 0];
let RollFinalOutput;
let d100RollResult;
let d10RollResult;

function DisplayFinalResult() {
  // 直接赋值为拼接后的字符串，而非数组
  RollFinalOutput = FinalResultArray.join("");

  document.getElementById("DiceResult").innerHTML = `${RollFinalOutput} DiceResult span`;
  document.getElementById("Text").innerText = `${RollFinalOutput} innerText span`;
  document.getElementById("HTML").innerHTML = `${RollFinalOutput} innerHTML span`;
}

function TestRoll() {
  Rolla1d100(0, 9);
  DisplayFinalResult();
}

function Rolla1d100(min, max) {
  // 修正随机数范围，确保能取到max值
  d10RollResult = Math.floor(Math.random() * (max - min + 1)) + min;
  d100RollResult = Math.floor(Math.random() * (max - min + 1)) + min;
  FinalResultArray[0] = d100RollResult;
  FinalResultArray[1] = d10RollResult;
}

修正后的HTML代码 #

<h2>Dice roll result displayed using innerText:</h2>

<h3>Result (span id DiceResult): <span id="DiceResult">??</span></h3>
<h3>Result (span id Text): <span id="Text">??</span></h3>
<h3>Result (span id HTML): <span id="HTML">??</span></h3>

<!-- 按钮直接调用TestRoll函数即可，无需赋值操作 -->
<p>document.getElementById('DiceResult').innerHTML <button onclick="TestRoll()">Run TestRoll</button></p>

<p>document.getElementById('innerText').innerHTML <button onclick="TestRoll()">Run TestRoll</button></p>

<p>document.getElementById('innerHTML').innerHTML <button onclick="TestRoll()">Run TestRoll</button></p>

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