如何让随机生成的十六进制颜色同时应用于多个HTML元素？

你的问题根源在于给同一个按钮绑定了3个独立的点击事件，而且其中两个事件里还重复调用了生成颜色的buttonClick函数——每次调用这个函数都会重新生成一个随机颜色，自然两个元素的背景色会不一样。

直接修改JavaScript代码，只保留一个点击事件处理函数，在里面只生成一次颜色，再把这个颜色同步应用到所有需要的地方：

// 获取按钮元素
const changeBtn = document.getElementById("chOver");

// 只绑定一个点击事件处理函数
changeBtn.addEventListener("click", function() {
    // 只生成一次随机十六进制颜色
    const randHex = Math.floor(Math.random() * 16777215).toString(16);
    const color = '#' + randHex;

    // 更新文本显示的颜色值
    document.getElementById('colorsp').textContent = color;
    // 设置图片的背景色
    $("#overalls").css("background-color", color);
    // 设置标题的背景色
    $("#colorsp").css("background-color", color);
});

代码说明： #

• 移除了多余的三个事件绑定，只保留一个点击处理逻辑
• 把颜色生成逻辑放在点击事件里，只执行一次，用变量color存储结果
• 用同一个color变量完成所有需要的操作：更新文本、设置两个元素的背景色
• 这里保留了你原有的jQuery写法，如果想完全用原生JS，也可以把$("#xxx").css()换成document.getElementById("xxx").style.backgroundColor = color

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