如何在不同调用位置获取Math.random生成的相同随机数

当前实现里，randomNum函数给diceNum.innerText和player.style.gridColumnStart赋值时会返回不同的随机值，需求是两处使用的随机数完全一致。

原问题代码 #

const randomNum = () => {
  return Math.floor(Math.random() * 6) + 1;
};

diceBtn.addEventListener("click", () => {
  const diceNum = document.getElementById("dice-num");
  diceNum.innerText = randomNum();
  drawPlayer();
});

function drawPlayer() {
  playerBody.forEach((pos) => {
    const player = document.createElement("div");
    player.style.gridRowStart = pos.x;
    player.style.gridColumnStart = randomNum();
    player.setAttribute("id", "playerElement");
    gameBoard.appendChild(player);
  });
}

问题根因 #

每次调用randomNum()都会独立生成一个全新的1-6区间随机整数：给骰子显示赋值时调用一次生成了第一个值，后续执行drawPlayer时循环调用randomNum()会生成多个完全独立的新随机值，和之前骰子显示的数值没有关联，自然无法保持一致。

修复方法 #

同一次点击交互中只调用一次随机数生成方法，把生成的结果存入变量，所有需要用到本次骰子点数的逻辑都复用这个变量值即可。给drawPlayer增加入参，把提前生成好的固定点数传入函数内部使用，不要在绘制逻辑里重复调用随机函数。

修复后可运行代码：

const randomNum = () => {
  return Math.floor(Math.random() * 6) + 1;
};

diceBtn.addEventListener("click", () => {
  const diceNum = document.getElementById("dice-num");
  // 单次点击仅生成一次随机数，存为局部变量复用
  const currentPoint = randomNum();
  diceNum.innerText = currentPoint;
  // 将生成好的点数传入绘制函数
  drawPlayer(currentPoint);
});

// 增加入参接收外部传入的固定点数
function drawPlayer(targetColumn) {
  playerBody.forEach((pos) => {
    const player = document.createElement("div");
    player.style.gridRowStart = pos.x;
    // 直接使用传入的固定列值，不再重复生成随机数
    player.style.gridColumnStart = targetColumn;
    // 注意：同页面id必须唯一，批量创建同类元素建议改用class
    player.setAttribute("class", "playerElement");
    gameBoard.appendChild(player);
  });
}

补充提示 #

• 批量创建DOM元素时不要给多个元素设置相同的id属性，标准HTML要求页面中id全局唯一，批量标识同类元素请使用class。
• 如果需求是点击骰子后移动已有玩家，而不是每次都新建玩家元素，可以提前缓存玩家DOM节点，点击时直接修改已有节点的网格位置样式即可，不需要重复创建DOM造成冗余。

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