Make images become unavailable when screen is not on fullscreen-CodePudding

I'm currently making my own card game with JS. The board randomly generates your deck with 5 images and displays them on the screen.

I've tried to make it so when you click on an image, it shows up in the game area, like simulating that you've "chosen that card" to play. With JQuery:

$("#img5").click
( 
    function() 
    { 
        var carta = document.images["img5"].src;
        document.images["carta2"].src = carta;
    } 
);

Ok, but the thing is that I only want that to happen when you are on fullscreen mode, so I made this logic:

pantallaCompleta = false;
contadorScreen = 0;
document.onfullscreenchange = function(event) 
{
    contadorScreen = contadorScreen   1;
    if(contadorScreen % 2 === 0)
    {
        pantallaCompleta = false;
        console.log("Exiting fullscreen");
        console.log(contadorScreen);
        console.log(pantallaCompleta);
    }
    else
    {
        pantallaCompleta = true;
        console.log("Entering fullscreen");
        console.log(contadorScreen);
        console.log(pantallaCompleta);
    }
};

The logic works so when you load the page, you're not on fullscreen mode so counter equals = 0 and check = false. Then, when document.onfullscreenchange = function(event) happens counter equals counter and check changes to true.

Okay, so with all of that combined and working, I try to put the JQuery code inside this:

if(pantallaCompleta == true)

It never works. The console.log(pantallaCompleta); is telling me that the check is true or false with accuracy, but the click on images never works.

Does anyone have an idea of what could be wrong?

CodePudding user response：

Currently you have

if(pantallaCompleta == true) {   
  $("#img5").click(function() {
    var carta = document.images["img5"].src;         
    document.images["carta2"].src = carta;
  });
}

This will only set an event listener on img5 if pantallaCompleta is true when this code runs, which is likely on page load.

I suggest you want an event listener that is always assigned (no matter the state of pantallaCompleta), but checks to see if that value is true or false before changing the img src.

$("#img5").click(function() {
  if(pantallaCompleta == true) {   
    var carta = document.images["img5"].src;         
    document.images["carta2"].src = carta;
  }
});