My fullscreen button works but when i click it first it doesn't in Articulate Storyline

I have two buttons to maximize and minimize the screen. When I run it in the browser, I click the zoom button, only my icon changes. Then I click the minimize button, only my icon changes. Finally, when I click the enlarge button, it grows smoothly, and when I click the shrink button, it shrinks without any problems.

The javascript code I am using:

function add_script(scriptURL,oID) {
     var scriptEl = document.createElement("script");
     var head=document.getElementsByTagName('head')[0];
      scriptEl.type = "text/javascript";      
      scriptEl.src = scriptURL;      
      scriptEl.id=oID;      
      head.appendChild(scriptEl);}

//only want to add these once!
if(document.getElementById('jquery')==null){
add_script("https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js","jquery");

}


/* Get into full screen */
function GoInFullscreen(preso) {
    if(preso.requestFullscreen)
        preso.requestFullscreen();
    else if(preso.mozRequestFullScreen)
        preso.mozRequestFullScreen();
    else if(preso.webkitRequestFullscreen)
        preso.webkitRequestFullscreen();
    else if(preso.msRequestFullscreen)
        preso.msRequestFullscreen();
}

/* Get out of full screen */
function GoOutFullscreen() {
    if(document.exitFullscreen)
        document.exitFullscreen();
    else if(document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if(document.webkitExitFullscreen)
        document.webkitExitFullscreen();
    else if(document.msExitFullscreen)
        document.msExitFullscreen();
}

/* Is currently in full screen or not */
function IsFullScreenCurrently() {
    var full_screen_preso = document.fullscreenpreso || document.webkitFullscreenpreso || document.mozFullScreenpreso || document.msFullscreenpreso || null;
    
    // If no preso is in full-screen
    if(full_screen_preso === null)
        return false;
    else
        return true;
}

GoInFullscreen($("#preso").get(0));