如何将span标签内默认颜色代码替换为随机生成的颜色代码？

你的核心需求是生成随机颜色设置为body背景，同时替换span标签内的默认颜色代码。当前代码的问题出在HTML结构上：默认颜色代码#775bd6写在了<span class="color"></span>标签外部，导致点击按钮时无法替换这段默认文本。以下是修正后的完整实现：

修正后的完整代码 #

HTML 部分 #

<h2>Color Flipper</h2>

<div class="bg-color">
  Background Color : 
  <span class="color">#775bd6</span>
</div>
<div class="btn">Click Me</div>

JavaScript 部分 #

// 定义十六进制颜色字符集
const hex = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

// 获取目标元素
const colorSpan = document.querySelector('.color');
const btn = document.querySelector('.btn');

// 按钮点击事件处理
btn.addEventListener('click', () => {
  let hexColor = '#';
  // 生成6位十六进制颜色码
  for (let i = 0; i < 6; i++) {
    hexColor += hex[getRandomNumber()];
  }
  // 更新span内的颜色代码文本
  colorSpan.textContent = hexColor;
  // 设置body背景色
  document.body.style.backgroundColor = hexColor;
});

// 随机索引生成函数
function getRandomNumber() {
  return Math.floor(Math.random() * hex.length);
}

关键修改说明 #

• HTML结构调整：将默认颜色#775bd6移入<span class="color">标签内部，确保JS可以直接操作这段文本内容。
• 语义化命名优化：把变量Color改为colorSpan，函数RandomNumber改为getRandomNumber，让代码可读性更强。

点击按钮后，body背景色会同步更新为新生成的颜色，同时span标签内的默认代码也会被替换成对应的十六进制颜色值。

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