求助：JavaScript随机背景色适配按钮文字颜色问题

你的代码存在两个关键问题：

1. 变量命名冲突：点击事件里声明的const newColor遮蔽了全局的let newColor，导致你无法在点击事件中获取到randomColor函数计算出的文本颜色值。
2. 未应用文本颜色：就算全局变量能正常访问，你也没有把计算好的黑白颜色赋值给按钮的文字样式。

另外，用全局变量传递状态容易引发混乱，更推荐让函数返回包含所需信息的对象，避免变量污染。

const button = document.querySelector('button');
const h1 = document.querySelector('h1');

button.addEventListener('click', () => {
    const { bgColor, textColor } = randomColor();
    document.body.style.backgroundColor = bgColor;
    h1.innerText = bgColor;
    // 设置按钮和h1的文字颜色，确保背景色变化后文字清晰可读
    button.style.color = textColor;
    h1.style.color = textColor;
})

const randomColor = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    // 计算颜色亮度值，公式是行业通用的灰度转换标准
    const brightness = r * 0.299 + g * 0.587 + b * 0.114;
    // 根据亮度阈值确定文本颜色
    const textColor = brightness > 186 ? 'black' : 'white';
    // 返回包含背景色和文本颜色的对象，清晰传递所需值
    return {
        bgColor: `rgb(${r}, ${g}, ${b})`,
        textColor: textColor
    };
}

• 改造randomColor函数，让它返回一个包含bgColor（背景色）和textColor（文本颜色）的对象，避免全局变量带来的冲突问题。
• 在点击事件中通过解构赋值获取两个颜色值，分别设置页面背景、h1的显示内容，同时给按钮和h1设置对应的文字颜色，确保背景偏暗时文字依然清晰。
• 移除了冗余的全局变量，代码逻辑更清晰，状态传递更可控。

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