Question

我正在尝试创建一个google脚本Web应用程序，它从HTML表单中获取输入并将输入传递给脚本。现在，该函数失败，因为document.getelementbyId('text')返回null而不是实际的表单值。我该如何解决这个问题？

的index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < 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);
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit()">
      <input name="text" type="text" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

Code.gs

//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 < 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 < data.length; i ++) {
    if(data[i] == input){
      TIMES.push(timesFromSheet[i][0]);
    }
  }
}

Answer 1

重复Why does jQuery or a DOM method such as getElementById not find the element?。

您似乎已回答了自己的问题。

document.getElementById('text')返回null 因为...... 您没有id="text"的元素。

document.getElementById将返回null

如果具有指定ID的元素不在文档中。（Mozilla Developer Network）

解决方案是[{1}} <input type="text" name="text" id="text"

Google Script中的document.getelementbyId不起作用

1 个答案: