JS新手求助：点击按钮切换背景色代码无法正常运行

你的代码核心问题是颜色判断逻辑仅在页面加载时执行一次，点击按钮时仅修改了buttonIsClicked变量，但不会重新触发颜色切换的判断。另外原逻辑只能将背景色从黑变白，无法实现反复切换的效果，需要调整状态切换的方式。

修正后的代码 #

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

let buttonIsClicked = false;

button.onclick = () => {
    // 每次点击切换状态
    buttonIsClicked = !buttonIsClicked;
    // 在点击事件内执行颜色切换逻辑
    if (buttonIsClicked) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'black';
    }
};

// 初始化页面背景色
body.style.backgroundColor = 'black';

关键改动说明 #

• 将颜色切换的if-else逻辑移到按钮的onclick事件处理函数内，确保每次点击按钮时都会执行颜色更新
• 把buttonIsClicked = true改为buttonIsClicked = !buttonIsClicked，实现点击一次切换一次状态的效果
• 增加初始化背景色的代码，确保页面加载时就显示初始的黑色背景

如果你想简化代码，也可以去掉额外变量，直接通过当前背景色判断切换：

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

button.onclick = () => {
    body.style.backgroundColor = body.style.backgroundColor === 'black' ? 'white' : 'black';
};

// 初始化
body.style.backgroundColor = 'black';

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