HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>requestFullscreen listener</title>
  <style>
    #box { width: 280px; height: 160px; background: #7c3aed; color: #fff; display: grid; place-items: center; border-radius: 8px; }
  </style>
</head>
<body>
  <div id="box">Listener demo</div>
  <button type="button" id="go">Toggle fullscreen</button>
  <p id="status">Status: windowed</p>
  <script>
    var box = document.getElementById("box");
    var status = document.getElementById("status");
    document.addEventListener("fullscreenchange", function () {
      if (document.fullscreenElement) {
        status.textContent = "Status: fullscreen on #" + document.fullscreenElement.id;
      } else {
        status.textContent = "Status: windowed";
      }
    });
    document.getElementById("go").addEventListener("click", function () {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        box.requestFullscreen().catch(function (err) {
          status.textContent = "Error: " + err.message;
        });
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.requestFullscreen — fullscreenchange (Try It)