通过onClick调用函数切换布尔值失效，求助排查与解决

1. 你的假设完全正确 #

布尔值是JavaScript的原始数据类型，当你把myBool作为参数传入函数时，传递的是变量的值副本，而非变量本身的引用。函数里的bool = !bool只是修改了这个副本的值，完全不会影响外部的myBool变量。每次点击按钮时，外部的myBool始终是false，传入函数后被改成true，所以按钮只会变成绿色，永远触发不了else分支。

2. 实现正常功能的几种通用方案 #

针对你有15个按钮的场景，推荐这几种可扩展的方案：

方案1：用对象统一管理所有按钮状态 #

把每个按钮的状态绑定到一个对象中，用按钮的唯一标识（类名、id等）作为键，方便统一维护：

// 存储所有按钮的状态
const buttonStates = {};
// 获取所有需要切换的按钮
const allToggleButtons = document.querySelectorAll('.js-toggle-btn');

// 初始化每个按钮的状态并绑定事件
allToggleButtons.forEach(btn => {
  // 用按钮的id或自定义属性当唯一标识，这里用类名示例
  const btnKey = btn.classList[0];
  buttonStates[btnKey] = false;
  btn.addEventListener('click', () => toggleBtnState(btnKey, btn));
});

function toggleBtnState(key, button) {
  // 修改原对象里的状态
  buttonStates[key] = !buttonStates[key];
  button.style.color = buttonStates[key] ? 'green' : 'white';
}

对应的HTML只需要给按钮统一加类名：

<button class="js-toggle-btn">TOGGLE 1</button>
<button class="js-toggle-btn">TOGGLE 2</button>
<!-- 其余13个按钮同理 -->

方案2：直接把状态存在按钮元素的dataset里 #

不需要额外全局变量，把状态绑定在按钮自己的data-*属性上，更简洁：

const allToggleButtons = document.querySelectorAll('.js-toggle-btn');

allToggleButtons.forEach(btn => {
  // 初始化状态，默认false（dataset值都是字符串）
  btn.dataset.toggled = 'false';
  btn.addEventListener('click', () => {
    const currentState = btn.dataset.toggled === 'true';
    // 更新状态
    btn.dataset.toggled = !currentState;
    btn.style.color = !currentState ? 'green' : 'white';
  });
});

HTML同样用统一类名即可：

<button class="js-toggle-btn">TOGGLE</button>

方案3：用闭包为每个按钮绑定独立状态 #

通过闭包让每个按钮的点击事件持有自己的状态变量，不用全局管理：

const allToggleButtons = document.querySelectorAll('.js-toggle-btn');

allToggleButtons.forEach(btn => {
  let isToggled = false;
  btn.addEventListener('click', () => {
    isToggled = !isToggled;
    btn.style.color = isToggled ? 'green' : 'white';
  });
});

补充：你之前addEventListener失效的原因 #

你之前用匿名函数包裹但没成功，大概率是还是把全局的myBool传进去了，本质和onclick属性的问题一样——修改的是值副本，而非原变量。上面的方案都避开了传递原始类型状态，直接操作属于每个按钮的独立状态。

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