在 if 语句中声明的 Javascript 变量不会更改全局变量

Question

我目前正在研究我的 html 作品，我尝试使用 Javascript 更改视频源。 这是我的视频元素。

<div>
   <video id="songVid" onmouseover="controlsVid()">
      <source src="../front-end/assets/media/video/vidio.mp4.mp4" >
      <track default src="../front-end/assets/media/subtitle/New folder/sub.vtt">
   </video>
</div>

这是 javascript 代码。

var x = 1;
var nextVid = document.getElementById("nextVid");
    nextVid.onclick = function() {
        if (x === 1) {
            opVid.src = "../front-end/assets/media/video/Moon Halo  Honkai Impact 3rd Valkyrie Theme_480p.mp4";
            opVid.play();
            var x = x + 1;
        }
        else if (x === 2) {
            opVid.src = "../front-end/assets/media/video/Honkai Impact 3rd Valkyrie Theme Rubia Performed by Zhou Shen  Honkai Impact 3rd_480p.mp4";
            opVid.play();
        }
        else {
            alert("Something went wrong");
        }
    }
var backVid = document.getElementById("backVid");
    backVid.onclick = function() {
        if (x === 0) {
            alert("End of the playlist");
        }
        else if (x === 2) {
            opVid.src = "../front-end/assets/media/video/Moon Halo  Honkai Impact 3rd Valkyrie Theme_480p.mp4";
            opVid.play(); 
            x = x - 1;
        }
        else if (x === 1) {
            opVid.src = "../front-end/assets/media/video/COVER  Tak Ingin Usai Mythia Batford _480p.mp4";
            opVid.play();
            x = x - 1; 
        } 
    }

因此，单击这些按钮时脚本将运行。

<div class="css-button-center">
    <button class="css-button" id="backVid"><i class="gg-play-slow-o flip"></i></button>
    <!-- <button class="css-button" id="slowVid"><i class="gg-play-backwards"></i></button> -->
    <button onclick="playVid()" class="css-button"><i class="gg-play-play-o"></i></button>
    <button onclick="pauseVid()" class="css-button"><i class="gg-play-pause-o"></i></button>
    <button onclick="stopVid()" class="css-button"><i class="gg-play-stop-o"></i></button>
    <!-- <button class="css-button" id="fastVid"><i class="gg-play-forwards"></i></button> -->
    <button class="css-button" id="nextVid"><i class="gg-play-fast-o"></i></button>
</div>

该脚本有一个变量 x ，每次单击带有 id next/back vid 的按钮时，它的值都会增加 1。 但是，在这些脚本上，x 的值不会增加。 每次单击按钮时，它仍然使用var x = 1; 而不是 if function 中的 x 值。 所以它只会用第二个源更改源，不会继续到下一个 src。 javascript 有什么解决方案吗？ 因为我认为问题只出在 Javascript 内的var x上。

Answer 1

在您的下一个 function 中，您声明了一个新变量，它恰好被称为“x”。 通过使用 var 关键字，您在 memory 中打开了一个新位置，并且此变量的范围为 function nextVid.onClick()。

如果您使用 VisualStudio 代码或 webstorm 编写代码，您可能会收到一个小警告，表明它隐藏了全局成员。

查看您的逻辑，当 x == 2 基于单击下一个或上一个按钮时，您想显示不同的视频是否正确？ 如果不是，那是一个错误，我会将重复的结构重构为这样的

var x = 1;
var nextVid = document.getElementById("nextVid");
// better yet make this a named function
nextVid.onclick = function() {
  videoToPlay();
  x += 1;
}
var backVid = document.getElementById("backVid");
// better yet make this a named function
backVid.onclick = function() {
  videoToPlay();
  x -= 1;
}

function videoToPlay() {
  // better yet pass in your video object instead of looking for it from a higher scope
 // better yet you could have an array of your videos and then just look up the index based on the value of 'x'  
switch (x) {
    case x === 0:
      alert("start of play list");
      break;
    case x === 1:
      opVid.src = "../front-end/assets/media/video/Moon Halo  Honkai Impact 3rd Valkyrie Theme_480p.mp4";
      break;
    case x === 2:
      opVid.src = "../front-end/assets/media/video/Honkai Impact 3rd Valkyrie Theme Rubia Performed by Zhou Shen  Honkai Impact 3rd_480p.mp4";
      break;
    case x === 3:
      opVid.src = "../front-end/assets/media/video/COVER  Tak Ingin Usai Mythia Batford _480p.mp4";
      break;

    default:
      alert("something went wrong");
  }
  opVid.play();
}