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.

`var x = x + 1;` should be `x = x + 1;` or `x++` you are creating a new variable here instead of using existing one — Madhawa Priyashantha, Sep 27 '22 at 05:58
Declaration and assignment are different tasks, don't declare a variable when you need an assignment. — Teemu, Sep 27 '22 at 05:58
@MadhawaPriyashantha @Teemu so the variable x outside the function should be written without ```var``` and inside the function it written with ```var```? — ゼーンゝZayn, Sep 27 '22 at 06:01
@Zeinshirou yes in this case. You should declare it first and then assign values to it. — Madhawa Priyashantha, Sep 27 '22 at 06:04
@Zeinshirou yes, exactly as you already do in the other event handler with `x = x - 1;` — VLAZ, Sep 27 '22 at 06:08

score -1 · Accepted Answer · answered Sep 27 '22 at 06:18

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

Thank you so much, this have fixed my problem with the script. But the one that makes me confused is, when I'm using the triple ```===``` the video source wont change. But when I use single ```=``` it works, what the differences? — ゼーンゝZayn, Sep 27 '22 at 06:39
`===` checks if the left is the same value and type as the right. It returns true or false. On the other hand `=` assigns the value of the right to the left. They're completely different things. One is used to test values and the other is used to assign values — slebetman, Sep 27 '22 at 07:25
and == checks value but if the types are different will do an automatic conversion which can have undesired results - https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons — Visualspark, Sep 27 '22 at 21:39

Javascript variable declared in if statement wont change the global variable

1 Answers1