HTML / JS 尝试使用 switch case 循环浏览网站上的字体选项，但它不起作用

Question

我有 6 种不同的字体选项，并且我在 HTML 中创建了一个按钮来调用 onclick 函数。我单击它一次，更改就起作用了，但是当我再次单击它时，它什么也没做。肯定遗漏了一些东西，我不知道它是什么。

function changeFont() {
  var font = "Arial";
  var fontNum = 1;

  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";
  }

  document.body.style.fontFamily = font;

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

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

它变成了蒙特塞拉特，但之后就没有了。

如有任何指导，我们将不胜感激，谢谢。

Answer 1

您在点击事件中声明了

var fontNum = 1

，因此当您单击按钮时

fontNum

从1变为2，这意味着

font

每次都会变成“Montserrat”。 将

fontNum

移出函数即可。