当我单击按钮时，我的变量不会增加

Question

我正在尝试创建一个按钮，以更改在后台播放的歌曲。我将歌曲0、1、2、3.ogg命名为我的主目录。但它在1次后不起作用。因此，当播放0.ogg并单击时，它会更改。但是在我再次单击之后，var保持在1，并且歌曲没有改变

我尝试了++ var和var ++以及其他一些小事情

function SongChange(){
      var prefix = 0;
      var song = prefix + ".ogg";

      ++prefix;

      document.getElementById("audio").pause();
      document.getElementById("audio").setAttribute('src', song);
      document.getElementById("audio").load();
      document.getElementById("audio").play();
      console.log(prefix);
    }

Answer 1

每次调用该函数时，++prefix会递增prefix……但是运行该函数时发生的 first 首先是var prefix = 0;将其设置为0！

将var prefix = 0;移动到函数外部，因此不会在每次调用函数时将变量设置为0。

Answer 2

运行SongChange时，首先要做的是将prefix设置为0。如果前缀是7，并且您运行了此方法，则它将：

1. 将前缀设置为0
2. 播放歌曲0
3. 增量前缀（将其设置为1）

在运行函数之前，无论前缀的值是多少，您都将始终播放歌曲0

相反，您需要在功能的外部外部存在前缀：

var prefix = 0;

function SongChange() {
      ++prefix;
      var song = prefix + ".ogg";

      document.getElementById("audio").pause();
      document.getElementById("audio").setAttribute('src', song);
      document.getElementById("audio").load();
      document.getElementById("audio").play();
}

同样，您应该检查prefix不会太大：

var prefix = 0;

function SongChange() {
      ++prefix;

      if (prefix > 3)
            prefix = 0;

      var song = prefix + ".ogg";

      document.getElementById("audio").pause();
      document.getElementById("audio").setAttribute('src', song);
      document.getElementById("audio").load();
      document.getElementById("audio").play();
}

备用解决方案：

有很多方法可以使prefix持久化，但是使其持久化是您的主要问题。您可以：

将其设置为静态对象（例如Function对象）的属性

function SongChange() {
  SongChange.prefix++;
  var song = SongChange.prefix + ".ogg";
  // ...
}
SongChange.prefix = 0;

function SongChange() {
  window.prefix++;
  var song = window.prefix + ".ogg";
  // ...
}
window.prefix = 0;

从<audio>标记中提取前一个前缀：

function SongChange() {
  var prefix = Number(document.getElementById("audio").src.split(".")[0]) || 0;
  prefix++;
  var song = prefix + ".ogg";
  // ...
}

在LocalStorage中存储前缀

function SongChange() {
  var prefix = Number(localStorage.getItem("prefix")) || 0;
  prefix++;
  var song = prefix + ".ogg";
  localStorage.setItem("prefix", prefix);
  // ...
}

还有其他选择，但是我敢肯定，您可以发挥创意并弄清楚它们。