Button to exit full screen in browser doesn't update

Question

I implemented some full screen feature for my current project, Here is the script:

jQuery(document).ready(function ($) {

    $(".full-screen-btn").bind("click", function () {
        launchIntoFullscreen(document.getElementById("main-container"));
        showExitFullScreenButton();
    });

    document.addEventListener("fullscreenchange", checkIfFullScreen);
    document.addEventListener("webkitfullscreenchange", checkIfFullScreen);
    document.addEventListener("mozfullscreenchange", checkIfFullScreen);
    document.addEventListener("MSFullscreenChange", checkIfFullScreen);

    function showFullScreenButton() {
        $(".exit-full-screen-btn").addClass("full-screen-btn");
        $(".exit-full-screen-btn").unbind('click')
        $(".full-screen-btn").removeClass("exit-full-screen-btn");
        $(".full-screen-btn").attr("value", "Full Screen");
        $(".full-screen-btn").bind("click", function () {
            launchIntoFullscreen(document.getElementById("main-container"));
            showExitFullScreenButton();
        });
    }

    function showExitFullScreenButton() {
        $(".full-screen-btn").addClass("exit-full-screen-btn");
        $(".full-screen-btn").unbind('click')
        $(".exit-full-screen-btn").removeClass("full-screen-btn");
        $(".exit-full-screen-btn").attr("value", "Exit");
        $(".exit-full-screen-btn").bind("click", function () {
            exitFullscreen();
            showFullScreenButton();
        });
    }

    function checkIfFullScreen() {
        if ($(".full-screen-btn").length) {
            showFullScreenButton();
        } else {
            showExitFullScreenButton();
        }
    }

    // Find the right method, call on correct element
    function launchIntoFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    // Close fullscreen
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
});

Everything is working fine with this script except when the user use the browser capability to exit the full screen (Like f11 and ESC button in keyboard) which doesn't update my exit button to be a fullscreen button again (I've seen the full screen and minimize button in Youtube and the minimize button is updated even the user use the browser capability to exit full screen). Can you guys help me? Thanks.

This is the html input button that is being replaced:

<input type="button" value="Full Screen" class="full-screen-btn"/>

Answer 1

Not sure, but in my opinion you should do something like this:

function exitFullscreen() {

    showFullScreenButton(); // THIS IS MY EDIT

    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

Answer 2

I've found the answer by using the keyup Event in javascript:

function checkIfFullScreen() {
    if ($(".full-screen-btn").length) {
        showFullScreenButton();
    } else {

        showExitFullScreenButton();
    }

    // check if f11 or ESC button was pressed
    $(document).keyup(function (e) {
        if (e.which == 122 || e.which == 27) {
            e.preventDefault();
            showFullScreenButton();
        }
    });
}