Why does my google web app go black after clicking ok on an alert

I am creating a webapp using google scripts. currently I have a form to search by users first and last names. All I want at the moment, when submit is pressed, is for an alert to appear and then beable to close the alert and get back to my page. The alert shows up properly however when I click ok the entire website is replaced by a blank screen.

Here is the code for my form:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>UMBC Physics Key Search - UMBC</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script>
    function clientNameSearch(){
      alert("Hello World")
    }
    </script>

</head>

<body id="home">
    <div class="divForm">
        <form>
            <div class="form-group">
                <label for="exampleInputFirstName">First Name</label>
                <input type="text" class="form-control" id="fName" placeholder="Enter first name">
      </div>
            <div class="form-group">
                <label for="exampleInputLastName">Last Name</label>
                <input type="text" class="form-control" id="lName" placeholder="Enter last name">
      </div>
            <button class="btn btn-primary" onclick="clientNameSearch()">Submit</button>
        </form>
    </div>
</body>

</html>

after clicking ok the HTML on my page is replaced with the following:

<!doctype html>
<html>

<head>
  <meta name="chromevox" content-script="no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" nonce="sak7PfejzdBV/GpLppcNoQ">
  <link rel="stylesheet" href="/static/macros/client/css/3668349325-mae_html_css_ltr.css">
  <script type="text/javascript" src="/static/macros/client/js/509262275-warden_bin_i18n_warden.js" nonce="sak7PfejzdBV/GpLppcNoQ"></script>
</head>

<body>
  <iframe id="sandboxFrame"
    allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *"
    sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation">
  </iframe>
  <script type="text/javascript" nonce="sak7PfejzdBV/GpLppcNoQ">
    (function() {
      var el = document.getElementById('sandboxFrame');
      el.onload = function() {
        goog.script.init(
          "\x7b\x22functionNames\x22:\x5b\x22doGet\x22,\x22newPage\x22,\x22getMostRecentRexReport\x22,\x22Audit\x22,\x22nameSearch\x22,\x22keySearch\x22,\x22roomSearch\x22,\x22addKey\x22,\x22getKeyMap\x22\x5d,\x22sandboxMode\x22:\x22IFRAME_SANDBOX\x22,\x22callbackTimeout\x22:1830000,\x22deploymentId\x22:\x22AKfycbz5l7sBeVfIyej2N2sdwr9XPY_ohJeyKfg9UmSCC4eYcmAFSIY82f3m8P8FXOB2ge-H5w\x22,\x22eei\x22:\x22\x22,\x22sandboxHost\x22:\x22https:\/\/n-p55pcvdns4cdjyxioy7uetab5monpm46hbajbha-0lu-script.googleusercontent.com\x22,\x22clientSideProperties\x22:\x7b\x22google.script.sandbox.mode\x22:\x22IFRAME_SANDBOX\x22,\x22google.script.host.origin\x22:\x22https:\/\/docs.google.com\x22\x7d,\x22actionPrefix\x22:\x22\/a\/umbc.edu\/macros\/s\/AKfycbz5l7sBeVfIyej2N2sdwr9XPY_ohJeyKfg9UmSCC4eYcmAFSIY82f3m8P8FXOB2ge-H5w\x22,\x22userHtml\x22:\x22\\u003c!DOCTYPE html\\u003e\\n\\u003chtml lang\\u003d\\\x22en\\\x22\\u003e\\n\\n\\u003chead\\u003e\\n\\t\\u003cmeta charset\\u003d\\\x22UTF-8\\\x22 \/\\u003e\\n\\t\\u003ctitle\\u003eUMBC Physics Key Search - UMBC\\u003c\\\/title\\u003e\\n\\t\\u003clink rel\\u003d\\\x22stylesheet\\\x22 href\\u003d\\\x22https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\\\x22\\n\\t\\tintegrity\\u003d\\\x22sha384-Gn5384xqQ1aoWXA\\u0026#43;058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW\/dAiS6JXm\\\x22 crossorigin\\u003d\\\x22anonymous\\\x22\\u003e\\n\\t\\u003cscript src\\u003d\\\x22\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\\\x22\\u003e\\u003c\\\/script\\u003e\\n\\t\\u003cscript async src\\u003d\\\x22\/\/sites.umbc.edu\/wp-content\/themes\/umbc\/assets\/javascripts\/wordpress.base.min.js?v\\u003d4\\\x22\\u003e\\u003c\\\/script\\u003e\\n\\t\\u003cscript\\u003e\\n\\t\\tfunction changePage(page) \x7b\\n            document.open();\\n            document.write(page);\\n            document.close();\\n        \x7d\\n\\t\\u003c\\\/script\\u003e\\n\\t\\u003cscript\\u003e\\n\\t\\tfunction clientNameSearch() \x7b\\n      var firstName \\u003d document.getElementById(\\\x22fname\\\x22).value;\\n      var lastName \\u003d document.getElementById(\\\x22lname\\\x22).value;\\n      google.script.run.withSuccessHandler(onSuccess).nameSearch(firstName, lastName);\\n    \x7d\\n    function onSuccess(result) \x7b\\n      document.getElementById(\\u0027nameDiv\\u0027).innerHTML \\u003d \\\x22\\u003cdiv id\\u003d\\u0027result\\u0027\\u003e\\\x22 + result + \\\x22\\u003c\\\/div\\u003e\\u003cinput type\\u003d\\u0027submit\\u0027 value\\u003d\\u0027Search\\u0027 onclick\\u003d\\u0027refresh()\\u0027\\u003e\\\x22;\\n    \x7d \\n    function refresh()\x7b\\n      document.getElementById(\\u0027nameDiv\\u0027).innerHTML \\u003d \\\x22\\u003cdiv id\\u003d\\u0027nameDiv\\u0027\\u003e\\\\\\n                         \\u003clabel for\\u003d\\u0027fname\\u0027\\u003eFirst Name\\u003c\\\/label\\u003e\\\\\\n                         \\u003cinput type\\u003d\\u0027text\\u0027 id\\u003d\\u0027fname\\u0027 name\\u003d\\u0027firstname\\u0027\\u003e\\\\\\n                         \\u003clabel for\\u003d\\u0027lname\\u0027\\u003eLast Name\\u003c\\\/label\\u003e\\\\\\n                         \\u003cinput type\\u003d\\u0027text\\u0027 id\\u003d\\u0027lname\\u0027 name\\u003d\\u0027lastname\\u0027 \\u003e\\\\\\n                         \\u003cinput type\\u003d\\u0027submit\\u0027 value\\u003d\\u0027Submit\\u0027 onclick\\u003d\\u0027clientNameSearch()\\u0027\\u003e\\\\\\n                    \\u003c\\\/div\\u003e\\\x22\\n    \x7d\\n\\t\\u003c\\\/script\\u003e\\n\\n\\t\\u003cscript\\u003e\\n\\t\\t$(function () \x7b\\n            $(\\u0027.menu a\x5bhref\\u003d\\\x22#\\\x22\x5d\\u0027).on(\\u0027click\\u0027, function (e) \x7b\\n                e.preventDefault();\\n                return false;\\n            \x7d);\\n        \x7d);\\n\\t\\u003c\\\/script\\u003e\\n\\n\\t\\u003cstyle\\u003e\\n\\t\\tbody \x7b\\n\\t\\t\\tfont-family: \\\x22Lato\\\x22, sans-serif;\\n\\t\\t\x7d\\n\\n\\t\\th1 \x7b\\n\\t\\t\\tpadding: 10px;\\n\\t\\t\\ttext-align: center;\\n\\t\\t\\tfont-family: serif;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav \x7b\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 250;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 1;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\tbackground-color: #111;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: 0.5s;\\n\\t\\t\\tpadding-top: 120px;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav \x7b\\n\\t\\t\\tpadding: 8px 8px 8px 32px;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t\\tfont-size: 25px;\\n\\t\\t\\tcolor: #818181;\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\ttransition: 0.3s;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav a:hover \x7b\\n\\t\\t\\tcolor: #f1f1f1;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav .closebtn \x7b\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tright: 25px;\\n\\t\\t\\tfont-size: 36px;\\n\\t\\t\\tmargin-left: 50px;\\n\\t\\t\x7d\\n\\n\\t\\t.topBar \x7b\\n\\t\\t\\tbackground-color: #fdb515;\\n\\t\\t\\theight: 100px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0px;\\n\\t\\t\x7d\\n\\n\\t\\t.divForm \x7b\\n\\t\\t\\talign-items: center;\\n\\t\\t\\twidth: 500px;\\n\\t\\t\\theight: 500px;\\n\\t\\t\\tmargin: 100px 0 0 400px;\\n\\t\\t\x7d\\n\\t\\u003c\\\/style\\u003e\\n\\u003c\\\/head\\u003e\\n\\n\\u003cbody id\\u003d\\\x22home\\\x22\\u003e\\n\\n\\t\\u003cdiv id\\u003d\\\x22container\\\x22\\u003e\\n\\t\\t\\u003cheader id\\u003d\\\x22umbc-header\\\x22\\u003e\\n\\n\\t\\t\\t\\u003c\\\/svg\\u003e\\u003cspan\\u003eUMBC: An Honors University in Maryland\\u003c\\\/span\\u003e\\u003c\\\/a\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\t\\u003c\\\/header\\u003e\\n\\n\\t\\u003cdiv class\\u003d\\\x22topBar\\\x22\\u003e\\n\\t\\t\\u003ch1\\u003eUMBC Physics Key Search\\u003c\\\/h1\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\t\\u003cdiv id\\u003d\\\x22mySidenav\\\x22 class\\u003d\\\x22sidenav\\\x22\\u003e\\n    \\u003cbr\/\\u003e\\n    \\u003cbr\/\\u003e\\n    \\u003cbr\/\\u003e\\n\\t\\t\\u003cul class\\u003d\\\x22sub-menu\\\x22\\u003e\\n\\t\\t\\t\\u003cli\\u003e\\n\\t\\t\\t\\t\\u003ca aria-current\\u003d\\\x22page\\\x22\\u003eSearch By Name\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027KeyNumber\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eSearch By Key Number\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027RoomNumber\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eSearch By Room Number\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027Inventory\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eOpen Inventory\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027AddKey\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eAdd Keys\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\u003c\\\/ul\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\t\\u003cdiv class\\u003d\\\x22divForm\\\x22\\u003e\\n\\t\\t\\u003cform\\u003e\\n\\t\\t\\t\\u003cdiv class\\u003d\\\x22form-group\\\x22\\u003e\\n\\t\\t\\t\\t\\u003clabel for\\u003d\\\x22exampleInputFirstName\\\x22\\u003eFirst Name\\u003c\\\/label\\u003e\\n\\t\\t\\t\\t\\u003cinput type\\u003d\\\x22text\\\x22 class\\u003d\\\x22form-control\\\x22 id\\u003d\\\x22fName\\\x22 placeholder\\u003d\\\x22Enter first name\\\x22\\u003e\\n      \\u003c\\\/div\\u003e\\n\\t\\t\\t\\u003cdiv class\\u003d\\\x22form-group\\\x22\\u003e\\n\\t\\t\\t\\t\\u003clabel for\\u003d\\\x22exampleInputLastName\\\x22\\u003eLast Name\\u003c\\\/label\\u003e\\n\\t\\t\\t\\t\\u003cinput type\\u003d\\\x22text\\\x22 class\\u003d\\\x22form-control\\\x22 id\\u003d\\\x22lName\\\x22 placeholder\\u003d\\\x22Enter last name\\\x22\\u003e\\n      \\u003c\\\/div\\u003e\\n\\t\\t\\t\\u003cbutton type\\u003d\\\x22submit\\\x22 class\\u003d\\\x22btn btn-primary\\\x22 onclick\\u003d\\\x22clientNameSearch()\\\x22\\u003eSubmit\\u003c\\\/button\\u003e\\n\\t\\t\\u003c\\\/form\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\n\\t\\u003c\\\/div\\u003e \\n\\t\\u003cfooter role\\u003d\\\x22contentinfo\\\x22 id\\u003d\\\x22umbc-footer\\\x22\\u003e\\n\\t\\t\\u003cdiv id\\u003d\\\x22umbc-footer-logo\\\x22\\u003e\\u003ca href\\u003d\\\x22https:\/\/umbc.edu\\\x22 title\\u003d\\\x22UMBC: An Honors University in Maryland\\\x22\\u003e\\u003csvg\\n\\t\\t\\t\\t\\tid\\u003d\\\x22UMBC-Footer-Logo\\\x22 data-name\\u003d\\\x22UMBC-Footer-Logo\\\x22 xmlns\\u003d\\\x22http:\/\/www.w3.org\/2000\/svg\\\x22\\n\\t\\t\\t\\t\\tviewBox\\u003d\\\x220 0 521 137\\\x22\\u003e\\n\\t\\t\\t\\t\\t\\u003ctitle\\u003eUMBC\\u003c\\\/title\\u003e\\n\\n\\t\\t\\t\\t\\u003c\\\/svg\\u003e\\u003cspan\\u003eUMBC: An Honors University in Maryland\\u003c\\\/span\\u003e\\u003c\\\/a\\u003e\\u003c\\\/div\\u003e\\n\\n\\t\\t\\u003cdiv id\\u003d\\\x22umbc-footer-info\\\x22\\u003e\\u0026copy; University of Maryland, Baltimore County \\u003cspan class\\u003d\\\x22bullet\\\x22\\u003e\\u0026bull;\\u003c\\\/span\\u003e\\n\\t\\t\\t1000 Hilltop Circle \\u003cspan class\\u003d\\\x22bullet\\\x22\\u003e\\u0026bull;\\u003c\\\/span\\u003e Baltimore, MD 21250\\u003c\\\/div\\u003e\\n\\t\\u003c\\\/footer\\u003e\\n\\t\\u003cscript type\\u003d\\u0027text\/javascript\\u0027 src\\u003d\\u0027https:\/\/styleguide.umbc.edu\/wp-includes\/js\/wp-embed.min.js?ver\\u003d5.3.2\\u0027\\u003e\\u003c\\\/script\\u003e\\n\\n\\u003c\\\/body\\u003e\\n\\n\\u003c\\\/html\\u003e\x22,\x22ncc\x22:\x22\x7b\\\x22awhs\\\x22:true\x7d\x22\x7d",
          "AJuLMu2XrggITuNYVUnfq3ny8Gy925_zAg:1616428813815", undefined, false, true, "true", "https:\/\/n-p55pcvdns4cdjyxioy7uetab5monpm46hbajbha-0lu-script.googleusercontent.com");
      }
      el.src = 'https:\/\/n-p55pcvdns4cdjyxioy7uetab5monpm46hbajbha-0lu-script.googleusercontent.com\/userCodeAppPanel';
    }());
  </script>
</body>

</html>

This only displays a blank screen. Does this have something to do with how google sheets displays alerts? I have never had this problem with standard HTML.

I have also tried removing all code from the function so it has no functionallity and I get the same result when I press a button of the blank screen.