按钮元素切换字体样式的JavaScript代码失效问题求助

嗨，Abraham，我看了你的代码，发现了几个导致changeFont()函数不工作的问题，咱们一步步来解决：

问题1：CSS字体声明语法错误 #

你的.invisible类里的font-family写法有问题，多个字体之间需要用逗号分隔，不然浏览器无法正确解析这个规则：

/* 错误写法 */
.invisible {
  font-family: 'Anton' 'sans-serif';
}

/* 修正后 */
.invisible {
  font-family: 'Anton', sans-serif;
}

问题2：JavaScript逻辑冗余且没必要 #

你现在的代码用querySelectorAll选中所有按钮后，又在循环里逐个判断是不是第0/1/2个元素，这完全是多余的——循环本身已经在遍历每个按钮了，直接对每个元素执行classList.toggle()就好。而且如果你的需求是点击哪个按钮就切换哪个的样式，那甚至不需要选中所有按钮，直接操作当前点击的元素更高效。

给你两种修正方案：

方案1：点击任意按钮，切换所有按钮的字体样式

function changeFont() {
  // 选中所有按钮
  const buttons = document.querySelectorAll("button");
  // 遍历每个按钮，切换类名
  buttons.forEach(button => {
    button.classList.toggle("invisible");
  });
}

方案2：点击单个按钮，只切换当前按钮的字体样式

这种方案更贴合常见的交互需求，你可以直接通过事件对象获取当前点击的元素：
首先修改HTML里的按钮点击事件，传入event参数：

<button onclick="changeFont(event)">Abraham Abah</button>
<button onclick="changeFont(event)">Work</button>
<button onclick="changeFont(event)">Lab</button>

然后修改JavaScript函数：

function changeFont(event) {
  // event.target就是当前点击的按钮元素
  event.target.classList.toggle("invisible");
}

或者也可以用this来获取当前元素（不需要传event参数）：

function changeFont() {
  this.classList.toggle("invisible");
}

把这些修正点改完之后，你的字体切换功能就能正常工作啦！

备注：内容来源于stack exchange，提问作者abraham