document.getElementById.innerHTML赋值变量不更新及音乐标题不显示问题求助

问题1：Num变量无法正确更新并同步到页面 #

原因 #

• next()函数的else分支中，用let Num = 1声明了局部变量，覆盖了全局的Num，导致全局变量未被重置。
• 函数内重复获取music元素属于冗余操作。

修复 #

将else分支里的let Num = 1改为Num = 1，直接修改全局变量；同时可以复用全局的music变量，无需重复获取。

问题2：音乐标题无法显示 #

原因 #

• HTML的<audio>标签未设置id="music"，JS初始化时获取该元素会返回null，报错中断代码执行，导致标题设置逻辑未运行。
• next()函数中使用了未定义的songNum变量，应为Num。

修复 #

1. 给<audio>标签添加id="music"；
2. 将next()函数里的songNum替换为Num。

完整修复后的代码 #

<!DOCTYPE html>
<html>

<body>
  <p id="Num"></p>
  <p id="musicTitle"></p>
  <button onclick="next()">pipi</button>
  <audio id="music" controls>
    <source id="songSrc" type="audio/mp3">
  </audio>

  <script>
    let Num = 1
    const maxNum = 2
    document.getElementById("Num").innerHTML = Num

    const song = [{
        title: "evil forest",
        src: "https://files.catbox.moe/c5zrzm.mp3"
      },
      {
        title: "forest",
        src: "https://files.catbox.moe/c5zrzm.mp3"
      },
    ]

    const music = document.getElementById("music");
    music.src = song[Num - 1].src;
    document.getElementById("musicTitle").innerHTML = song[Num - 1].title;

    function next() {
      if (maxNum > Num) {
        Num++
      } else {
        Num = 1
      }
      music.src = song[Num - 1].src
      document.getElementById("musicTitle").innerHTML = song[Num - 1].title;
      document.getElementById("Num").innerHTML = Num
    }
  </script>
</body>

</html>

额外优化建议：

• 用let/const声明全局变量，避免隐式创建全局变量；
• 全局的music变量只需获取一次，无需在函数内重复获取，提升性能。

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