如何用for循环修改多个<img>标签src属性实现骰子随机图片展示

我帮你梳理下代码里的几个小问题，这也是导致for循环没生效的核心原因：

• for循环条件写反了：你写的是i > arr.length，但循环初始i是0，0肯定小于数组长度，所以循环根本没执行。应该改成i < arr.length。
• 循环里误用了return：return会直接终止函数，哪怕循环能跑，也只会修改第一个元素就停止了，得把return去掉，直接给每个元素的src赋值就行。
• 按钮事件绑定错误：button.onclick = display(imgs) 这种写法是直接调用了display函数，页面一加载就会执行一次，而点击按钮时反而没反应。应该改成绑定函数引用，或者用匿名函数包裹。

接下来是修正后的完整代码，我标注了修改的关键点：

const dice1 = document.getElementById('dice1');
const dice2 = document.getElementById('dice2');
const dice3 = document.getElementById('dice3');
const dice4 = document.getElementById('dice4');
const dice5 = document.getElementById('dice5');
const dice6 = document.getElementById('dice6');
const button = document.getElementById('button');
const imgs = [dice1, dice2, dice3, dice4, dice5, dice6];
let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 'https://i.postimg.cc/QKGQPzZx/Man.jpg', 'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg', 'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'];

const display = (arr) => { 
  // 修正1：把循环条件改成i < arr.length
  for (let i = 0; i < arr.length; i++){
    // 修正2：去掉return，直接给每个元素的src赋值
    arr[i].src = pics[Math.floor(Math.random() * pics.length)] 
  } 
}

// 修正3：绑定函数引用，用匿名函数包裹触发逻辑
button.onclick = () => display(imgs);

另外给你个小优化建议：不用逐个获取骰子元素，如果你的img标签都有共同的class（比如dice-img），可以用document.querySelectorAll直接批量获取，代码会更简洁，后续增减骰子数量也不用改JS：

const button = document.getElementById('button');
// 直接获取所有带dice-img类的图片元素，转成数组
const imgs = Array.from(document.querySelectorAll('.dice-img'));
let pics = ['https://i.postimg.cc/MfVDpSmQ/Eagle.jpg', 'https://i.postimg.cc/QKGQPzZx/Man.jpg', 'https://i.postimg.cc/1g7MWMzf/Dog.jpg', 'https://i.postimg.cc/xc9HzM07/Telephone.jpg', 'https://i.postimg.cc/4mwcbyy3/Robot.jpg', 'https://i.postimg.cc/ctRRNcd7/Moon.jpg', 'https://i.postimg.cc/xJW5QCMQ/Dinosaur.jpg', 'https://i.postimg.cc/hhdMrLRt/Fish.jpg', 'https://i.postimg.cc/Ty1JWmcG/Flowers.jpg'];

const display = (arr) => { 
  for (let i = 0; i < arr.length; i++){
    arr[i].src = pics[Math.floor(Math.random() * pics.length)] 
  } 
}

button.onclick = () => display(imgs);

内容的提问来源于stack exchange，提问作者darius.maximus