I have a full-screen functionality on my website implemented in JavaScript, and it is working on all of the pages, except ONE. I have a button with the ID fullscreen-btn, and I want to toggle fullscreen mode when this button is clicked. Here’s my JavaScript code:

document.getElementById("fullscreen-btn").addEventListener("click", function () {
  console.log("It is in the Fullscreen functionality")
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    this.innerHTML = '<i class="fas fa-compress"></i>';
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
      this.innerHTML = '<i class="fas fa-expand"></i>';
    }
  }
});

However, when I click the button, instead of toggling full-screen mode, nothing happens. I’ve checked for errors in the browser console, ensured jQuery is loaded, and made sure there are no conflicts with other scripts or stylesheets, but I can’t seem to figure out what’s causing this issue.

Also, as you can see, I added a console.log to check if it enters the JS code, but it seems like it is not even entering the JS function, which is very strange.

I tried to add event.preventDefault(); under the cosole.log but it is not helping.

This is the HTML code of the button:

          <div class="d-flex align-items-center">
            <!-- Fullscreen Toggle Button -->
            <a class="nav-link" href="#" role="button" id="fullscreen-btn">
              <i class="fas fa-expand"></i>
            </a>
          </div>

Can anyone help me troubleshoot why the fullscreen functionality isn’t working as expected and how to fix it?