使用:nth-child选择器的猜色程序无法正常运行求助

你的猜色程序中RGB颜色未生效的核心原因是Map键名拼接错误，导致无法正确读取颜色值，进而生成浏览器无法识别的无效颜色值，且因为undefined在字符串拼接后不会触发报错，所以没有提示信息。

错误点拆解 #

• 读取Map值时，你错误地写了colorMap.get("+red+" + count)，这里的"+red+"是无效的字符串拼接，实际应该是"red" + count——之前存入Map的键是"red"+x、"green"+x，读取时键名必须完全匹配，否则会返回undefined，最终生成的RGB值格式为rgb(undefined,undefined,xxx)，浏览器无法解析这个颜色。
• 次要问题：RandomCreator里的Math.round(Math.random()*254)会漏掉255这个合法的RGB数值，改成Math.floor(Math.random()*256)能覆盖0-255的完整范围；另外函数未用const/let声明，会隐式成为全局变量，建议补上声明规范代码。

修复后的完整代码 #

JavaScript

const colorMap = new Map();
const colorSelector = Math.round(Math.random() * 5);

const RandomCreator = () => Math.floor(Math.random() * 256);
const ColorCreator = (x) => {
  colorMap.set("red" + x, RandomCreator());
  colorMap.set("green" + x, RandomCreator());
  colorMap.set("blue" + x, RandomCreator());
};

// 一次性获取所有色块元素，避免重复查询DOM
const colorBlocks = document.querySelectorAll('#colors div');
for (let count = 0; count < colorBlocks.length; count++) {
  ColorCreator(count);
  const red = colorMap.get("red" + count);
  const green = colorMap.get("green" + count);
  const blue = colorMap.get("blue" + count);
  colorBlocks[count].style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}

CSS

#colors div{
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  display: inline-block;
  margin: 5px;
}

HTML

<div id="colors">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

额外优化说明 #

• 使用document.querySelectorAll一次性获取所有色块元素，避免循环内重复查询DOM，提升性能。
• 用模板字符串（`rgb(${red}, ${green}, ${blue})`）替代传统字符串拼接，代码可读性更强。

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