如何通过 onClick 调用函数来切换布尔值？

Question

我对 javascript 很陌生，我尝试在 StackOverflow 中搜索，但找不到我的问题的答案。

我创建了一个函数，可以在按下按钮时根据布尔值修改一些 HTML 元素（即更改颜色）。我尝试调用该函数并通过按钮中的 HTML onclick 命令传递变量，但布尔值未正确切换。元素的颜色会发生变化，就好像布尔值为 true 一样，但永远不会变回去。我怀疑它没有从我的 .js 文件中获取正确的布尔值，而是从 bool 参数创建一个新的布尔值。其实我有两个问题：

1. 我对问题的假设正确吗？
2. 我怎样才能做到这一点？

这是我的代码片段：

const myBtn = document.querySelector('.js-myBtn');
let myBool = false;

function buttonToggle(bool, button) {
  bool = !bool;
  if (bool) {
    button.style.color = 'green';
  } else {
    button.style.color = 'white';
  }
}

<button class="js-myBtn" onclick="buttonToggle(myBool, myBtn)">TOGGLE</button>

通常我不会使用通用函数，但我有 15 个不同的按钮，我不想为每个按钮编写特定的函数。任何帮助将不胜感激。如果这太明显了，或者我遗漏了一些东西，我很抱歉，我的时间有点紧迫。

除了上面显示的 onclick 命令中的函数调用之外，我还尝试为 .js 代码中的每个按钮分配一个 eventListener 并通过那里运行该函数（包装在匿名函数中），但发生了同样的问题。我尝试在头部链接我的脚本文件（我知道这不是一个好主意，但我只是想看看会发生什么）。我还尝试将布尔值放入数组中并将其传递...愚蠢，我知道，但我在工作中没有人可以问（我是这里唯一的程序员，而且我只是一名初级程序员）。预先感谢您花时间查看和帮助！

Answer 1

函数参数按值传递，而不是按引用传递。因此，分配给

bool

不会修改

myBool

。

您应该让函数返回新值，然后您可以将其重新分配给变量。

let myBool = false;

function buttonToggle(bool, button) {
  bool = !bool;
  if (bool) {
    button.style.color = 'green';
  } else {
    button.style.color = 'white';
  }
  return bool;
}

<button class="js-myBtn" onclick="myBool = buttonToggle(myBool, this)">TOGGLE</button>