JS洗牌后无法更新HTML图片src？求可行解决方法

当然可以通过JavaScript修改HTML图片元素的src属性，这是前端开发中非常常见的操作。你的代码之所以没有效果，主要是因为错误地使用了innerHTML来设置图片地址，同时逻辑上也有可以优化的地方。

问题分析 #

先看你点击事件里的关键错误代码：

document.getElementsByClassName('cards')[i].innerHTML = myCards[i].src;

<img>是自闭合标签，它的内容（innerHTML）不会被浏览器解析成图片，图片的地址是通过src属性控制的，所以这里应该设置.src而不是.innerHTML。

另外，你获取myCards的方式有点繁琐，getElementsByClassName返回的是HTMLCollection，可以直接转成数组，不用手动一个个push。

解决方案 #

这里提供两种可行的实现方式，你可以根据需求选择：

方式1：打乱图片地址数组，重新赋值给原图片元素

这种方式不会改变DOM结构，只是替换每个图片的src：

// 获取所有cards元素并转成数组
const myCards = Array.from(document.getElementsByClassName('cards'));
// 收集所有图片的src到数组
const cardSrcs = myCards.map(card => card.src);

// 独立洗牌函数（避免修改Array原型）
function shuffleArray(arr) {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i >= 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    // 解构赋值交换元素，更简洁
    [newArr[randomIndex], newArr[i]] = [newArr[i], newArr[randomIndex]];
  }
  return newArr;
}

// 绑定按钮事件
const playButton = document.getElementById("play");
playButton.onclick = function() {
  // 洗牌src数组（复制原数组避免污染）
  const shuffledSrcs = shuffleArray(cardSrcs);
  // 把洗牌后的src依次赋值给每个图片
  myCards.forEach((card, index) => {
    card.src = shuffledSrcs[index];
  });
};

方式2：打乱DOM元素数组，重新插入到页面中

这种方式会改变DOM的顺序，视觉上直接交换图片的位置：

// 获取所有cards元素并转成数组
const myCards = Array.from(document.getElementsByClassName('cards'));
// 获取图片的父容器（假设所有img都在同一个父元素下）
const cardContainer = myCards[0].parentNode;

// 独立洗牌函数
function shuffleArray(arr) {
  const newArr = [...arr];
  for (let i = newArr.length - 1; i >= 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [newArr[randomIndex], newArr[i]] = [newArr[i], newArr[randomIndex]];
  }
  return newArr;
}

// 绑定按钮事件
const playButton = document.getElementById("play");
playButton.onclick = function() {
  // 洗牌DOM元素数组
  const shuffledCards = shuffleArray(myCards);
  // 清空父容器，重新插入洗牌后的元素
  cardContainer.innerHTML = '';
  shuffledCards.forEach(card => {
    cardContainer.appendChild(card);
  });
};

额外提示 #

• 尽量避免直接修改Array.prototype（你的原代码把洗牌方法加在原型上），多人协作时容易造成命名冲突，使用独立函数更安全。
• getElementsByClassName返回的是动态集合，DOM变化时会自动更新；而Array.from会把它转成静态数组，操作起来更稳定。

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