运行Google Web应用程序脚本后变为空白屏幕 [英] Getting blank screen after running Google web app script
本文介绍了运行Google Web应用程序脚本后变为空白屏幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在通过Google表格制作签到应用程序，并希望制作一个搜索功能，该功能需要在HTML表单中输入体育名称作为输入，然后从HTML表格中的表单返回有关该运动的信息。但是，当我尝试测试Web应用程序时，没有任何反应。
Index.html >
<！DOCTYPE html>
< html>
< head>
<？！= HtmlService.createHtmlOutputFromFile（'Stylesheet'）。getContent（）; ？>
< / head>
< body>
< fieldset id =tasks-panel>
< legend>运动< / legend>
< label for =sport-name>按名称搜索运动：< / label>
< input type =textname =sport-nameid =sport-name/>
< button onclick ='addTable（）'id ='submit-button'>按下这个< / button>
< / form>
< p>东西列表：< / p>
< div id =togglestyle =display：none>< / div>
< / fieldset>
<？！= HtmlService.createHtmlOutputFromFile（'Javascript'）。getContent（）; ？>
< / body>
< / html>
Javascript.html
< script>
function addTable（）{
var sportInput = $（'sport-name'）。value（）;
var columnNames = [姓名，时间];
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'）; （var j = 0; j
;
var th2 = document.createElement（'td'）;
var date2 = document.createTextNode（row [j]）;
th2.appendChild（date2）;
y2.appendChild（th2）;
}
}
}
< / script>
Code.gs
//设置全局变量
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函数
函数doGet（）{
return HtmlService.createTemplateFromFile（'Index'）。evaluate（）
.setTitle（'Check In Data' ）
.setSandboxMode（HtmlService.SandboxMode.IFRAME）;
}
//获取签入人员的姓名和时间
function getSportData（input）{
var sportInput = input;
getNamesInSport（sportInput）;
getTimesInSport（sportInput）;
OUTPUT = [
[NAMES]，
[TIMES]
];
Logger.log（OUTPUT）;
返回OUTPUT;
}
//将输入的运动中每个人的姓名放入数组中。
函数getNamesInSport（输入）{
var data = sportsFromSheet.getValues（）;
$ b $ for（var i = 0; i< data.length; i ++）{
if（data [i] == input）{
NAMES.push（namesFromSheet [ I] [0]）;
}
}
}
//将每个人从输入的运动中放入数组中。
函数getTimesInSport（输入）{
var data = sportsFromSheet.getValues（）;
for（var i = 0; i< data.length; i ++）{
if（data [i] == input）{
TIMES.push（ timesFromSheet [I] [0]）;
解决方案
JQuery id选择器必须以＃作为前缀，以便从'sport-name'输入中获取值，您需要使用
选择它 var sportInput = $（'＃sport-name'）。val（）;
另外，正如Robin在上面评论的那样，如果您想使用JQuery库，则需要加载它，你显示的代码表明你可能没有做到这一点？
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js>< / script>
< / head>
尽管如果情况如此，您可能会直接看到'$ is not defined'错误离开。
I am working on a check-in app though Google Sheets and want to make a search function that that takes a sport name as input in an HTML form and then returns information about the sport from the sheet in a HTML table. However, when I try to test the web app, nothing happens. How can I fix this?
Here is my code:
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>
Code.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]);
}
}
}
解决方案
JQuery id selectors must be prefixed with # so to grab the value from the the 'sport-name' input you'll need to select it using
var sportInput = $('#sport-name').val();
Additionally, as Robin comments above, if you want to use the JQuery library you'll need to load it, the code you've shown indicates you might not have done this?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Although if this were the case you'd probably be seeing a '$ is not defined' error straight away.
这篇关于运行Google Web应用程序脚本后变为空白屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
