document.getelementbyId in Google Script not working
<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>