使用switch-case切换网页字体失效：仅首次点击生效求助

问题根源 #

你代码里的fontNum变量是在changeFont函数内部定义的，每次调用函数都会把它重新初始化为1。首次点击时fontNum变成2，切换到Montserrat；之后逻辑把fontNum设为0，但下次点击函数又会把它重置为1，再变成2，永远停在Montserrat，所以后续点击没反应。

修复方案 #

把fontNum移到函数外部，让它在函数调用之间保留状态：

// 把fontNum放在函数外部，保持状态
let fontNum = 1;
function changeFont() {
  let font = "Arial";

  fontNum++;

  switch (fontNum) {
    case 1:
      font = "Josefin Sans";
      break;
    case 2:
      font = "Montserrat";
      break;
    case 3:
      font = "Lora";
      break;
    case 4:
      font = "Suse";
      break;
    case 5:
      font = "Fenix";
      break;
    case 6:
      font = "Courier Prime";
      break; // 补充break，避免逻辑溢出
    default:
      font = "Arial";
      fontNum = 0; // 重置状态
  }

  document.body.style.fontFamily = font;

  if (fontNum >= 6) {
    fontNum = 0;
  }
}

HTML代码无需修改：

<input type="button" id="font-toggle" value="Aa" onclick="changeFont()" />

额外优化点 #

• 给switch的最后一个case加上break是良好的编码习惯，避免后续添加新case时出现逻辑错误
• 增加default分支处理意外的数值情况，确保状态能正确重置

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