为何H1文本颜色未按设定RGB总和逻辑变化，反而随机切换？

核心问题 #

你在按钮点击事件里生成了一组r/g/b数值，但实际设置网页背景色时调用的randomColor()函数内部又重新生成了另一组完全独立的r/g/b。这就导致：

• 背景色用的是randomColor()里的随机RGB值
• 判断h1颜色时用的是点击事件里先生成的那组RGB值
  两者完全不匹配，所以h1颜色切换看起来随机，完全不遵循你设定的总和条件。

修复方案（两种可选） #

方案一：将已生成的RGB值传入randomColor函数

让函数基于点击事件里的RGB值生成颜色字符串，确保判断逻辑和背景色用同一组数值：

const button = document.querySelector('button');
const h1 = document.querySelector('h1');
button.addEventListener('click', function() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const newColor = randomColor(r, g, b); // 传入已生成的RGB值
    document.body.style.backgroundColor = newColor;
    // 现在判断的是和背景色一致的RGB总和
    if (r + g + b < 200) {
        h1.style.color = 'white';
    } else {
        h1.style.color = 'black';
    }
    h1.innerText = newColor;
})

// 修改函数，接收外部传入的RGB参数
const randomColor = (r, g, b) => {
    return `rgb(${r}, ${g}, ${b})`;
}

方案二：让randomColor返回完整的RGB数据

把生成的RGB数值和颜色字符串一起返回，点击事件里直接用这组真实数据做判断：

const button = document.querySelector('button');
const h1 = document.querySelector('h1');
button.addEventListener('click', function() {
    const { colorString, r, g, b } = randomColor(); // 解构获取所有数据
    document.body.style.backgroundColor = colorString;
    if (r + g + b < 200) {
        h1.style.color = 'white';
    } else {
        h1.style.color = 'black';
    }
    h1.innerText = colorString;
})

const randomColor = () => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return {
        colorString: `rgb(${r}, ${g}, ${b})`,
        r,
        g,
        b
    };
}

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