title: Make images become unavailable when screen is not on fullscreen
body: <p>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.</p>
  <p>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 &quot;chosen that card&quot; to play. With JQuery:</p>
  <pre><code>$(&quot;#img5&quot;).click
  ( 
      function() 
      { 
          var carta = document.images[&quot;img5&quot;].src;
          document.images[&quot;carta2&quot;].src = carta;
      } 
  );
  </code></pre>
  <p>Ok, but the thing is that I only want that to happen when you are on fullscreen mode, so I made this logic:</p>
  <pre><code>pantallaCompleta = false;
  contadorScreen = 0;
  document.onfullscreenchange = function(event) 
  {
      contadorScreen = contadorScreen + 1;
      if(contadorScreen % 2 === 0)
      {
          pantallaCompleta = false;
          console.log(&quot;Exiting fullscreen&quot;);
          console.log(contadorScreen);
          console.log(pantallaCompleta);
      }
      else
      {
          pantallaCompleta = true;
          console.log(&quot;Entering fullscreen&quot;);
          console.log(contadorScreen);
          console.log(pantallaCompleta);
      }
  };
  </code></pre>
  <p>The logic works so when you load the page, you're not on fullscreen mode so counter equals = 0 and check = false. Then, when <code>document.onfullscreenchange = function(event)</code> happens counter equals counter++ and check changes to true.</p>
  <p>Okay, so with all of that combined <strong>and</strong> working, I try to put the JQuery code inside this:</p>
  <pre><code>if(pantallaCompleta == true)
  </code></pre>
  <p>It never works. The <code>console.log(pantallaCompleta);</code> is telling me that the check is true or false with accuracy, but the click on images never works.</p>
  <p>Does anyone have an idea of what could be wrong?</p>