如何让代码正确生成配色？排查HTML/CSS导致的颜色渲染异常

颜色无法正常渲染是HTML加载顺序问题，和你写的颜色生成核心逻辑无关：

• 当JS代码放置在三个颜色div的前面（比如写在<head>标签内），执行document.getElementById获取c1/c2/c3元素时，浏览器还没解析到对应的DOM节点，三个变量拿到的都是null，后续设置背景色的代码运行会直接报错，颜色自然无法显示。
• 缺少基础CSS配置：三个div默认高度由内部文本撑开，若后续调整内部内容、行高，很容易出现div高度为0，看不到背景色的问题。

1. 调整JS位置：将所有JS代码移动到HTML结构的末尾，也就是</body>标签之前，确保所有DOM元素解析完成后再执行JS逻辑。
2. 给颜色块添加基础CSS样式，保证元素可见。
3. 可选修复JS隐患（不影响核心显示，但会导致配色生成不符合预期）：

• toFixed()返回值是字符串类型，直接和数字相加会触发字符串拼接，导致hsl参数非法，需要转成数字类型
• 原逻辑中重复调用rand做判断，会导致分支概率异常，z=120的分支几乎不会触发，需要调整判断逻辑

/* 新增基础样式 */
button {
  padding: 8px 16px;
  margin-bottom: 12px;
  cursor: pointer;
}
#c1, #c2, #c3 {
  width: 100%;
  min-height: 120px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
}

<!-- HTML结构保持不变，JS移到结构末尾 -->
<button onclick='cc();'>Create Color Themes!</button>
<div id='c1'>X</div>
<div id='c2'>X</div>
<div id='c3'>X</div>

<script>
function rand(x) {
  // 转成数字类型，避免字符串拼接
  return Number((Math.random() * x).toFixed(0));
}
// DOM解析完成后再获取元素
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
var c3 = document.getElementById('c3');

function cc() {
  let y = rand(360);
  let z;
  // 先生成一次随机数再判断，避免重复调用rand导致分支概率异常
  const zType = rand(2);
  if (zType === 0) {
    z = 50;
  } else if (zType === 1) {
    z = 120;
  } else {
    z = 170;
  }
  c1.style.backgroundColor = `hsl(${y}deg, ${50+rand(50)}%, ${rand(25)+25}%)`;
  c2.style.backgroundColor = `hsl(${(y+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`;
  c3.style.backgroundColor = `hsl(${(y+z+z)%360}deg, ${50+rand(50)}%, ${rand(25)+25}%)`;
}
cc();
</script>

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