javascript - js fullscreen toggle button goes to fullscreen but won't exit it -

i have function tied onclick event of button. should check see if documentelement should toggle full screen mode , swap button image.

function togglefs() {     var fsmode = (document.fullscreenelement && document.fullscreenelement !==     null) ||    // alternative standard method         (document.mozfullscreen || document.webkitisfullscreen);     var page = document.documentelement;     if(!fsmode) {         if(page.requestfullscreen) {             page.requestfullscreen();         } else if (page.mozrequestfullscreen) {             page.mozrequestfullscreen();         } else if (page.webkitrequestfullscreen) {             page.webkitrequestfullscreen();         }         document.getelementbyid("toggle-fs").innerhtml = '<img src="/images/nofs.png">';     } else {         if (page.exitfullscreen) {             page.exitfullscreen();         } else if (page.msexitfullscreen) {             page.msexitfullscreen();         } else if (page.mozcancelfullscreen) {             page.mozcancelfullscreen();         } else if (page.webkitexitfullscreen) {             page.webkitexitfullscreen();         }         document.getelementbyid("toggle-fs").innerhtml = '<img src="/images/fs.png">';     } } 

on first click after page load, works correctly , puts page in fullscreen , switches button exit fullscreen image.

on second click, replaces image button not exit fullscreen. (hitting 'esc' still works.)

any following clicks nothing @ all. stuck in fullscreen go fullscreen button.

this behavior in chrome 56.

can see i've gone wrong here?

the functions request full screen, such webkitrequestfullscreen, on document.documentelement, ones exit full screen, such webkitexitfullscreen, on document. snippet below works on chrome, edge, , ie.

document.getelementbyid("toggle-fs").addeventlistener("click", function() {   togglefs() });  function isfullscreen() {   return (document.fullscreenelement && document.fullscreenelement !== null) ||     (document.msfullscreenelement && document.msfullscreenelement !== null) ||     (document.mozfullscreen || document.webkitisfullscreen); }  function enterfs() {   var page = document.documentelement   if (page.requestfullscreen) page.requestfullscreen();   else if (page.mozrequestfullscreen) page.mozrequestfullscreen();   else if (page.msrequestfullscreen) page.msrequestfullscreen();   else if (page.webkitrequestfullscreen) page.webkitrequestfullscreen(); }  function exitfs() {   if (document.exitfullscreen) return document.exitfullscreen();   else if (document.webkitexitfullscreen) return document.webkitexitfullscreen();   else if (document.msexitfullscreen) return document.msexitfullscreen();   else if (document.mozcancelfullscreen) return document.mozcancelfullscreen(); }  function togglefs() {   if (!isfullscreen()) {     enterfs();     document.getelementbyid("toggle-fs").innerhtml = '<img src="/images/nofs.png">';   } else {     exitfs();     document.getelementbyid("toggle-fs").innerhtml = '<img src="/images/fs.png">';   } } 

jsfiddle