Aparecer la pantalla en blanco después de ejecutar el script de la aplicación web de Google

Question

Nov 22, 2016, 01:16 AM

Aparecer la pantalla en blanco después de ejecutar el script de la aplicación web de Google

Estoy trabajando en una aplicación de registro a través de Google Sheets y quiero hacer una función de búsqueda que tome el nombre de un deporte como entrada en un formulario HTML y luego devuelva información sobre el deporte de la hoja en una tabla HTML. Sin embargo, cuando trato de probar la aplicación web, no pasa nada. ¿Cómo puedo arreglar esto?

Aquí está mi código:

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