onclick函数无法修改布尔值，双按钮触发背景色切换失效求助

问题根源 #

你的函数修改变量的方式是正确的，但核心问题在于：页面加载完成后，if (uno && dos)这段判断代码只会执行一次。当你点击按钮修改uno和dos的值后，不会重新触发这个条件检查，所以背景色不会自动切换。而手动修改初始变量值时，页面加载阶段if条件就满足，因此能看到背景色变化，这也说明变量修改和类添加的逻辑本身是有效的。

修正方案 #

将背景色切换的逻辑封装成独立函数，每次点击按钮后调用该函数，实时检查变量状态并更新页面样式：

修正后的完整代码

<html>
<body>
  <button id="1" onclick="change1()">#1</button>
  <button id='2' onclick="change2()">#2</button>
</body>
</html>

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background-color: #8AB0AB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.change {
  background-color: #F4D35E;
}

let uno = false;
let dos = false;

// 封装检查逻辑
function checkAndUpdateBackground() {
  if (uno && dos) {
    document.body.classList.add("change");
  }
}

function change1() {
  uno = true;
  checkAndUpdateBackground(); // 点击后触发检查
}

function change2() {
  dos = true;
  checkAndUpdateBackground(); // 点击后触发检查
}

额外优化建议 #

如果需要支持按钮切换状态（点击一次激活，再点击取消），可以修改函数逻辑，让交互更灵活：

let uno = false;
let dos = false;

function checkAndUpdateBackground() {
  if (uno && dos) {
    document.body.classList.add("change");
  } else {
    document.body.classList.remove("change");
  }
}

function change1() {
  uno = !uno; // 切换布尔值状态
  checkAndUpdateBackground();
}

function change2() {
  dos = !dos; // 切换布尔值状态
  checkAndUpdateBackground();
}

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