JavaScript Document fullscreenchange Event

const fullScreenElement = document.querySelector("#fullscreen-div");
const logger = document.querySelector("#logger");

function log(message) {
  logger.textContent = `${logger.textContent}\n${message}`;
}

function fullscreenchangeHandler() {
  if (document.fullscreenElement) {
    log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    log("Leaving fullscreen mode.");
  }
}

document.addEventListener("fullscreenchange", fullscreenchangeHandler);

document.getElementById("toggle-fullscreen").addEventListener("click", () => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    fullScreenElement.requestFullscreen();
  }
});

const el = document.getElementById("fs");
const status = document.getElementById("status");

document.onfullscreenchange = () => {
  status.textContent = document.fullscreenElement
    ? "Fullscreen ON"
    : "Fullscreen OFF";
};

document.getElementById("toggle").addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    el.requestFullscreen();
  }
});

const btn = document.getElementById("toggle");
const el = document.getElementById("fs");
const note = document.getElementById("note");

const canFs =
  typeof el.requestFullscreen === "function" &&
  typeof document.exitFullscreen === "function";

if (!canFs) {
  btn.disabled = true;
  note.textContent = "Fullscreen API not available in this environment.";
} else {
  note.textContent = "Fullscreen API looks available.";
  document.addEventListener("fullscreenchange", () => {
    note.textContent = document.fullscreenElement
      ? "Now fullscreen"
      : "Windowed again";
  });
  btn.addEventListener("click", () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      el.requestFullscreen();
    }
  });
}

const el = document.getElementById("fs");
const btn = document.getElementById("toggle");

function syncClass() {
  el.classList.toggle("is-fullscreen", Boolean(document.fullscreenElement));
  btn.textContent = document.fullscreenElement
    ? "Exit fullscreen"
    : "Enter fullscreen";
}

document.addEventListener("fullscreenchange", syncClass);

btn.addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    el.requestFullscreen();
  }
});

const el = document.getElementById("fs");
const msg = document.getElementById("msg");

document.addEventListener("fullscreenchange", () => {
  msg.textContent = document.fullscreenElement
    ? "Fullscreen OK"
    : "Windowed mode";
});

document.addEventListener("fullscreenerror", () => {
  msg.textContent = "Could not change fullscreen (permission or environment).";
});

document.getElementById("toggle").addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen().catch(() => {});
  } else {
    el.requestFullscreen().catch(() => {
      msg.textContent = "requestFullscreen() rejected.";
    });
  }
});