个人中心
gpt4 book ai didi

google-apps-script - Google 脚本中的 document.getelementbyId 不起作用

转载 作者：行者123 更新时间：2023-12-04 02:08:51 25 4
gpt4 key购买 nike

我正在尝试制作一个谷歌脚本网络应用程序，它从 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>

代码.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]);
    }
  }
}

最佳答案

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

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

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

document.getElementById将返回 null

if an element with the specified ID is not in the document. (Mozilla Developer Network)

解决方案是 <input type="text" name="text" id="text" >

关于google-apps-script - Google 脚本中的 document.getelementbyId 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40776895/

25 4 0
文章推荐： r - 在 R 中不替换地向字符插入空格
文章推荐： reactjs - 使用自定义图标的 Material UI Stepper 会删除步骤编号。如何使用自定义图标添加数字或随机文本？
文章推荐： android - 如何写入和更新数据到 google 电子表格 android (api v4)
文章推荐： php - 如何在 Symfony 表达式语言中连接字符串、参数和函数返回结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com