运行 Google Web 应用脚本后出现黑屏答案

【问题标题】：Getting blank screen after running Google web app script运行 Google Web 应用脚本后出现黑屏
【发布时间】：2016-11-22 00:16:10
【问题描述】：

我正在通过 Google 表格开发一个签到应用程序，并希望创建一个搜索功能，该功能将运动名称作为 HTML 表单中的输入，然后从 HTML 表格中的表格返回有关运动的信息。但是，当我尝试测试 Web 应用程序时，没有任何反应。我该如何解决这个问题？

这是我的代码：

Index.html

<!DOCTYPE html>
 <html>
  <head>
   <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  </head>
  <body>

    <fieldset id="tasks-panel">
      <legend>Sports</legend>

      <form name="sport-form" id="sport-form">
        <label for="sport-name">Search a sport by name:</label>
        <input type="text" name="sport-name" id="sport-name" />
        <button onclick='addTable()' id='submit-button'>Press this</button>
      </form>

      <p>List of things:</p>
      <div id="toggle" style="display:none"></div>
    </fieldset>

    <?!= HtmlService.createHtmlOutputFromFile('Javascript').getContent(); ?>

  </body>
</html>

Javascript.html

<script> 
  function addTable() {
  var sportInput = $('sport-name').value();
  var columnNames = ["Names", "Times"];
  var dataArray = google.script.run.getSportData(sportInput);


  var myTable = document.createElement('table');
  $('#divResults').append(myTable);

  var y = document.createElement('tr');
  myTable.appendChild(y);

  for(var i = 0; i < columnNames.length; i++) {
    var th = document.createElement('th'),
        columns = document.createTextNode(columnNames[i]);
    th.appendChild(columns);
    y.appendChild(th);
  }

  for(var i = 0 ; i < dataArray.length ; i++) {
    var row= dataArray[i];
    var y2 = document.createElement('tr');
    for(var j = 0 ; j < row.length ; j++) {
      myTable.appendChild(y2);
      var th2 = document.createElement('td');
      var date2 = document.createTextNode(row[j]);
      th2.appendChild(date2);
      y2.appendChild(th2);
        }
      }
  }
</script>

代码.gs

//Setting up global variables
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 = [];
var OUTPUT = [];

//doGet function
function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Check In Data')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

//Gets both names and times of checked-in people 
function getSportData(input) {
  var sportInput = input;
    getNamesInSport(sportInput);
    getTimesInSport(sportInput);

    OUTPUT = [
      [NAMES],
      [TIMES]
      ];

    Logger.log(OUTPUT);
    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]);
    }
  }
}

【问题讨论】：

报错了吗？开发控制台说什么？
开发控制台显示Uncaught TypeError: $(...).value is not a function。谷歌脚本中的执行记录似乎成功了（它说Execution Succeeded）。
我认为错误在 javascript.html 文件的第 3 行，即 var sportInput = $('sport-name').value(); .. 我猜你必须写 .val() 而不是 value，试试吧，但不确定。
我认为如果你想在 Web App 中使用任何库，你必须先显式加载它。

标签： javascript html google-apps-script

【解决方案1】：

JQuery id 选择器必须以 # 为前缀，因此要从“运动名称”输入中获取值，您需要使用来选择它

var sportInput = $('#sport-name').val();

此外，正如上面的 Robin cmets，如果您想使用 JQuery 库，您需要加载它，您显示的代码表明您可能没有这样做？

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

虽然如果是这种情况，您可能会立即看到“$ 未定义”错误。

【讨论】：

我修复了这些问题，但仍然无法正常工作。看起来这两件事帮助解决了问题的一部分，但开发控制台仍然显示Uncaught TypeError: Cannot read property 'length' of undefined(…) addTable and onclick，然后是Uncaught Error: The script completed but the returned value is not a supported return type，下面有一堆值。关于这些可能来自什么的任何想法？
您在 addTable 中有三个对 .length 的调用（columnNames、dataArray 和 row）。 columnNames 由您定义 var columnNames = ["Names", "Times"]; 所以我们知道这没关系。行是使用来自 dataArray var row= dataArray[i]; 的值创建的，因此我们可以看出 dataArray 存在问题。使用 console.log 确定从您的 google.script.run 调用返回的内容。