//creating a button and linking it to btnClicked()

document.onload=()=>{

  let btn = document.createElement("button");

  btn.textContent = 'Fulscreen!';

  btn.addEventListener('click', btnClicked);

  document.body.append(btn);

}

​

function btnClicked(){

  document

    .getElementById("%id of the element you want to fullscreen%")

    .requestFullscreen();

}

​

//to exit fullscreen

document.exitFullscreen();

function setFullScreen() {

  document.documentElement.requestFullScreen();

  //the idea is to select an element and request fullscreen on that element. 

  //document does not have a requestFullScreen function

}

// element which needs to enter full-screen mode

var element = document.querySelector("#container");

​

// make the element go to full-screen mode

element.requestFullscreen()

    .then(function() {

        // element has entered fullscreen mode successfully

    })

    .catch(function(error) {

        // element could not enter fullscreen mode

    });

// Request full screen for the whole document

function toggleFullScreen() {

  var doc = window.document;

  var docEl = doc.documentElement;

​

  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;

  var exitFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

​

  if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {

    // Enter full screen mode

    if (requestFullScreen) {

      requestFullScreen.call(docEl);

    }

  } else {

    // Exit full screen mode

    if (exitFullScreen) {

      exitFullScreen.call(doc);

    }

  }

}

​

// Usage: Call the toggleFullScreen() function to trigger full screen mode on/off