如何为25个div各自分配1-25随机数？为何我的代码生成相同数值？

问题描述 #

我正在开发一款游戏，创建了25个作为方块的div元素，期望用户点击「Start Game」按钮时，为每个方块分配1-25范围内的随机数。
我已完成以下操作：

• 通过Math.floor()和Math.random()生成随机数；
• 将所有div元素存入名为squares的数组中；
• 尝试使用循环、map、forEach等方法为元素赋值，但所有方块的textContent均显示同一个随机数，而非各自分配不同数值。

我困惑为何遍历数组时，未在每次循环中为方块分配新的随机数？

原代码 #

HTML

<body>
    <main>
      <div class="time">
        <p class="time__countdown">Time left:</p>
      </div>
      <grid class="grid">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </grid>
      <button class="btn">Start Game</button>
    </main>
  </body>

CSS

* {
    margin: 0;
    padding: 0;
    }
    
    body, html {
    min-width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    font-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    }
    
    
    img {
        max-width: 100%;
        display: block;
    }

   
    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24%;
        background-color: white;
        border-radius: 10px;
    }

JavaScript

let btn = document.querySelector('.btn')
const squares = [...document.querySelectorAll('.square')];

const random = Math.floor(Math.random() * 25)

btn.addEventListener('click', startGame)

function startGame() {
let randomNumber

    for (let i = 0; i < squares.length; i++) {
        randomNumber = squares[i].textContent = random;
        
    }
}

错误原因 #

1. 随机数仅生成一次：你在全局作用域定义了const random = Math.floor(Math.random() * 25)，这个值在页面加载时就被固定，循环中只是把同一个值重复赋值给所有方块，所以所有方块显示相同内容。
2. 随机数范围错误：当前代码生成的是0-24的随机数，不符合需求的1-25范围，需要加1修正。

解决方法 #

方法1：每次循环生成新随机数（允许重复）

把随机数生成逻辑放到循环内部，确保每次迭代都生成新的随机数。用forEach更简洁：

let btn = document.querySelector('.btn')
const squares = [...document.querySelectorAll('.square')];

btn.addEventListener('click', startGame)

function startGame() {
    squares.forEach(square => {
        // 生成1-25的随机数
        const randomNumber = Math.floor(Math.random() * 25) + 1;
        square.textContent = randomNumber;
    });
}

如果习惯用for循环：

function startGame() {
    for (let i = 0; i < squares.length; i++) {
        const randomNumber = Math.floor(Math.random() * 25) + 1;
        squares[i].textContent = randomNumber;
    }
}

方法2：生成不重复的1-25随机数（每个数字唯一）

如果游戏需要每个方块的数字不重复，可以先生成有序数组再打乱后赋值：

function startGame() {
    // 生成1到25的有序数组
    const numbers = Array.from({ length: 25 }, (_, index) => index + 1);
    // 打乱数组顺序
    numbers.sort(() => Math.random() - 0.5);
    // 为每个方块分配唯一数字
    squares.forEach((square, index) => {
        square.textContent = numbers[index];
    });
}

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