title: Google Sheets App Script Html onload not working
body: <p>I'm using google sheets and I'm creating a document that will pull through employees that are out of the office. I have a menu option to remove employee data, and it opens the sidebar where I have an HTML form (<a href="https://i.stack.imgur.com/0CRwB.png" rel="nofollow noreferrer">Image of my project</a>). I'm trying to have it generate a dropdown list of current employees on the list.</p>
  
  <p>I've developed the code to pull through the data I need:</p>
  
  <pre class="lang-js prettyprint-override"><code>function removeAnyone() {
    var html = HtmlService.createHtmlOutputFromFile('RemoveAnyone');
    SpreadsheetApp.getUi()
      .showSidebar(html);
  }
  
  function getList() {
    var headerRows = 1;
    var sheet = SpreadsheetApp.getActive().getSheetByName("Data");
    var range = sheet.getRange(headerRows + 1, 1, sheet.getMaxRows() - headerRows, 1);
    var arrayValues = range.getValues();
    return arrayValues;
  }
  </code></pre>
  
  
  
  <p>Now we move over to my html, where I am simply trying to load the dropdown list using a for loop in the header:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;base target="_top"&gt;
    &lt;script&gt;
      function addOption_list() {
  
       document.getElementById("output").innerHTML = "test";
  
      var options = google.script.run.getList();
  
      for (var i = 0; i &lt; options.length; ++i;) {
        var optn = document.createElement("OPTION");
        optn.text = options[i];
        optn.value = options[i];
        document.myForm.selectEmployee.options.add(optn);
  
        }
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="addOption_list()"&gt;
    &lt;form id="myForm" onsubmit="submitForm(this)"&gt;
      &lt;select id="selectEmployee"&gt;
        &lt;option&gt;Choose an employee&lt;/option&gt;
       &lt;/select&gt;
    &lt;/form&gt;
    &lt;div id="output"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  
  
  <p>I threw a div in the body and have the function changing the value to "test" at the start, this was just to check and see if the function was even being called, which it doesn't seem like it is.</p>
  
  <p>I also tried using window.onload (as shown below), but that didn't get me anywhere either.:</p>
  
  <pre class="lang-js prettyprint-override"><code>window.onload = function {
  
       document.getElementById("output").innerHTML = "test";
  
      var options = google.script.run.getList();
  
      for (var i = 0; i &lt; options.length; ++i;) {
        var optn = document.createElement("OPTION");
        optn.text = options[i];
        optn.value = options[i];
        document.myForm.selectEmployee.options.add(optn);
  
        }
      }
  </code></pre>
  
  
  
  <p>Any guidance you can give me would be really appreciated!</p>