如何实现点击按钮随机更改网页背景色并显示对应RGB色值

现有代码无法实现预期效果的核心原因：

• 随机色值生成逻辑写在点击事件外，页面加载时仅生成1次，点击按钮不会刷新随机值
• 点击事件内硬编码了固定红色rgb(200, 0, 0)，没有调用随机值
• 事件绑定对象错误：绑定到了外层class为button的div上，实际可点击的是div内部的button元素，点击无法触发事件
• 冗余计算：Math.round(Math.floor())属于重复逻辑，Math.floor本身就返回整数，无需额外四舍五入

JavaScript 逻辑（script.js） #

// 获取DOM元素
const colourCodeDom = document.querySelector('.colourCode');
const clickBtn = document.querySelector('.button button');

// 生成0-255区间随机色值
const getRandomChannelValue = () => Math.floor(Math.random() * 256);

// 绑定点击事件
clickBtn.addEventListener('click', () => {
    // 每次点击重新生成三通道随机值
    const r = getRandomChannelValue();
    const g = getRandomChannelValue();
    const b = getRandomChannelValue();
    // 拼接标准RGB颜色字符串
    const currentColor = `rgb(${r}, ${g}, ${b})`;
    // 修改页面背景
    document.body.style.backgroundColor = currentColor;
    // 展示当前颜色代码
    colourCodeDom.innerText = currentColor;
});

CSS 样式（style.css） #

body{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    gap: 20px;
}

.button button{
    height: 3rem;
    width: 8rem;
    font-size: larger;
    cursor: pointer;
    border: none;
    border-radius: 6px;
}

.colourCode{
    padding: 0 15px;
    background-color: antiquewhite;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
}

注：原CSS中.colourCode重复定义了两次font-size属性，已清理冗余代码，同时给按钮和颜色展示块加了轻微圆角优化视觉效果，不需要可以删除

HTML 结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>随机背景色切换</title>
</head>
<body>
    <div class="colourCode"></div>
    <div class="button"><button>点击切换颜色</button></div>
    
    <script src="script.js"></script>
</body>
</html>

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