Javascript variable declared in if statement wont change the global variable

Question

I'm currently working on my html works, where I try to change the video source using Javascript. Here is my video element.

<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>

And here is the javascript code.

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

So, the script will run when these button clicked.

<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>

The script has a variable x where it's value will increase by 1 everytime the button with id next/back vid clicked. But, on these script, the value of x wont increase. Everytime the button clicked, it still uses the var x = 1; rather than the x value inside the if function. so it'll only change the source with the 2nd source and wont continue to the next src. Is there any solution for the javascript? because i think the problem is only on var x inside the Javascript.

Answer 1

In your next function you have declared a new variable which happens to be called 'x'. By using the var keyword you opened a new spot in memory and this variable is scoped to the function nextVid.onClick().

If you use VisualStudio code or webstorm to write your code you will probably get a little warning that it hides the global member.

Looking at your logic, is it correct that you want to show different videos when x == 2 based on clicking the next or previous button? If not and that is a mistake i would refactor the repeated structure to something like this

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();
}