Automatically Unchecking The Checkbox When Someone Exits Fullscreen Using Escape Or F11 (javascript)

I am very new to javascript and only know bare basics. I have an HTML checkbox which is powered by javascript to toggle and untoggle fullscreen. The problem I am facing is I don't

Solution 1:

Took me a lot longer than I thought this would. Following this I was able to work out the below:

elem.addEventListener("mozfullscreenchange",function(){
    if (document.mozFullScreen == false) {
      document.getElementById("fullscreen").checked = false; 
    }
  }, false);

  elem.addEventListener("webkitfullscreenchange",function(){
      if (document.webkitIsFullScreen == false) {
        document.getElementById("fullscreen").checked = false; 
      }
  }, false);

Here is a live example

Solution 2:

let fullScreen = falsewindow.onkeydown = e =>{
    if(fullScreen & e.keyCode==122 || e.keyCode==27){
        //here you clear stuff , couse user wants to exitconsole.log("exitFullScreen")
        fullScreen = false
    }
}

window.onresize = _=> {if((screen.availHeight-70 || screen.height-70) <= window.innerHeight && "fullscreen"){
    fullScreen = trueconsole.log("enteringFullScreen")
}}

Live Example