为什么我的文本似乎是随机改变颜色，而不是根据我给它的计算改变?

Question

我是Stack Overflow的新手，所以如果我使用错误，请原谅我。我正在学习Colt Steele的优秀前端web开发人员课程，并对JavaScript有所了解。这里是一些代码，在Javascript中随机生成一个背景颜色的网页，当我点击按钮。我尝试添加自己的额外步骤是在rgb值组合小于200时将h1的颜色更改为白色。我在页面上打印出RGB值，看起来h1元素只是随机地从黑色变为白色，而不是基于我在if语句中呈现的值。有人能告诉我为什么吗?谢谢你。

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();
document.body.style.backgroundColor = newColor;
// Set the color of the h1 element based on the luminosity
if (r + g + b < 200) {
h1.style.color = 'white';
} else {
h1.style.color = 'black';
}
h1.innerText = newColor;
})

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

Answer 1

您正在生成2组随机值，其中一组在侦听器函数中用于确定h1样式，另一组在分配给innerText的randomColor函数中。因此，您打印出来的值并不是用于计算<200的值。