Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Sandbox</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="/JSDev/styles.css">
        <script>
            function loadScript(location) {
                // Check for existing script element and delete it if it exists
                var js = document.getElementById("sandboxScript");
                if(js) {
                    document.head.removeChild(js);
                    console.info("---------- Script refreshed ----------");
                }

                // Create new script element and load a script into it
                js = document.createElement("script");
                js.src = location;
                js.id = "sandboxScript";
                document.head.appendChild(js);
            }

            // Make sure script has loaded and display an alert if it has not
            function runScript() {
                if(typeof sandbox !== "undefined") {
                    sandbox();
                } else {
                    window.alert("The script has not been loaded yet!");
                }
            }
        </script>
    </head>
    <body onload="loadScript('sandbox.js')">
        <h1>Sandbox</h1>
        <button id="refreshButton" onclick="loadScript('sandbox.js')">
            Refresh script
        </button>
        <button id="runButton" onclick="runScript()">
            Run script
        </button>
        <br>
        <button id="refreshRunButton" style="font-weight:bold"
                onclick="loadScript('sandbox.js'); runScript();">
            Refresh and run script
        </button>
    </body>
</html>