title: document.getelementbyId in Google Script not working
body: <p>I am trying to make a google script web app that takes input from an HTML form and passes the input to a script. Right now, the function is failing because <code>document.getelementbyId('text')</code> returns <code>null</code> instead of the actual form value. How can I fix this?</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base target="_top"&gt;
      &lt;script&gt;
        // Prevent forms from submitting.
        function preventFormSubmit() {
          var forms = document.querySelectorAll('form');
          for (var i = 0; i &lt; forms.length; i++) {
            forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
            });
          }
        }
  
        window.addEventListener('load', preventFormSubmit);
  
        function handleFormSubmit() {
          var formObject = document.getElementById('text');
          google.script.run.withSuccessHandler(setTable).getSportData(formObject);
          console.log(formObject);
        }
  
        function setTable(data) {
          var div = document.getElementById('output');
          div.innerHTML = createTable(data);
        }
  
        /**
        * Adds an html table
        */ 
        function createTable(tableData) {
        var table = document.createElement('table');
        var tableBody = document.createElement('tbody');
  
          tableData.forEach(function(rowData) {
            var row = document.createElement('tr');
  
            rowData.forEach(function(cellData) {
              var cell = document.createElement('td');
              cell.appendChild(document.createTextNode(cellData));
              row.appendChild(cell);
            });
  
            tableBody.appendChild(row);
          });
  
          table.appendChild(tableBody);
          document.body.appendChild(table);
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id="myForm" onsubmit="handleFormSubmit()"&gt;
        &lt;input name="text" type="text" /&gt;
        &lt;input type="submit" value="Submit" /&gt;
      &lt;/form&gt;
      &lt;div id="output"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Code.gs</p>
  
  <pre><code>//Initalization of global variables for use by the script's custom functions
  
  var ss = SpreadsheetApp.openById("spreadsheetID");
  var sheet = ss.getSheetByName("Sheet1");
  
  var sportsFromSheet = sheet.getRange("D4:D12");
  var namesFromSheet = sheet.getRange("B4:B12").getValues();
  var timesFromSheet = sheet.getRange("A4:A12").getValues();
  var NAMES = [];
  var TIMES = [];
  
  /**
   * Handles HTTP GET requests to the published web app.
   * @return {HtmlOutput} The HTML page to be served.
   */
  function doGet() {
    return HtmlService.createHtmlOutputFromFile('Index');
  }
  
  /**
   * Gets both names and Times of checked-in people from the spreadsheet from the private function getOutput.
   * @return {HtmlOutput} A 2D array containing the names and times.
   */
  function getSportData(formObject) {
      getNamesInSport(formObject);
      getTimesInSport(formObject);
  
      var OUTPUT = [
        [NAMES],
        [TIMES]
        ];
  
    return OUTPUT;
  }
  
  //Puts the names of every person from an inputted sport into an array.
  function getNamesInSport(input) { 
    var data = sportsFromSheet.getValues();
  
    for (var i = 0; i &lt; data.length; i++) {
      if(data[i] == input){
        NAMES.push(namesFromSheet[i][0]);
      }
    }
  }
  
  //Puts the times of every person from an inputted sport into an array.
  function getTimesInSport(input){
    var data = sportsFromSheet.getValues();
  
    for (var i = 0; i &lt; data.length; i ++) {
      if(data[i] == input){
        TIMES.push(timesFromSheet[i][0]);
      }
    }
  }
  </code></pre>