javascripthtmlfunctiongoogle-apps-scriptscriptlet

AppScript: Function not defined

I'm writing basic bread-and-butter HTML and Javascript in Appscript to make a modal dialog. When I click a button, or check a checkbox, a function is supposed to be called. The modal appears, but it can't find the javascript functions (e.g., addRemoveCal), claiming they're undefined.

Here's the html:

<!DOCTYPE html>
<html>

<head>
  <base target="_top"/>

  <?!= include('TemplateSelectCSS'); ?>
</head>



<body>
  <p>Which templates do you want to create?</p>
  <ul>
    <li><input type="checkbox" value = "makeMonthReviewTemplate_" name="selMR" onchange="addRemoveMR()"/>
      <label for="selMR">Monthly Review</label>
    </li>
    <li>
      <input type="checkbox" value = "makeCalendar_" name="selCal" onchange="addRemoveCal()"/>
      <label for="selCal">Calendar</label>
    </li>
    <li>
      <input type="checkbox" value = "makeLogTemplate_" name="selLog" onchange="addRemoveLog()"/>
      <label for="selLog">Log</label>
    </li>
    <li>
      <input type="checkbox" value = "makeLogExportTemplate_" name="selLogExport" onchange="addRemoveLogEx()"/>
      <label for="selLogExport">Log Export</label>
    </li>
  </ul>
  <button value="OK" onclick="runFunctionList()"> OK </button>
</body>
<?!= include('TemplateSelectJS'); ?>

</html>

Here's the referenced html files:

TemplateSelectJS

<script>
  var functionList =[];
  function addRemoveMR(){
  functionList.push(makeMonthReviewTemplate_);
  }

  function addRemoveCal(){
    functionList.push(makeCalendar_);
  }

  function addRemoveLog(){
    functionList.push(makeLogTemplate_);
  }

  function addRemoveLogEx(){
    functionList.push(makeLogExportTemplate_);
  }

  function runFunctionList(){
    functionList.forEach(func = >google.script.run.func());
    google.script.host.close();
  }
</script>

For the record, I know that the appscript functions have to be public to work, but this doesn't make it past finding the javascript funtions (e.g., addRemove).

Solution

  • I tested this out myself and I noticed I was also getting this error in the console when:

    Uncaught SyntaxError: Unexpected token '>' (at userCodeAppPanel:20:33)

    I believe that's the root cause of your issue. The HTML isn't being completely parsed because of a parsing error and so your functions never actually get defined (which is why you see that error when you manipulate the UI).

    The bug is coming from:

    function runFunctionList(){
    functionList.forEach(func = >google.script.run.func());
    google.script.host.close();
  }

    Notice the space between the = and > in the arrow function. If you change that to:

    function runFunctionList(){
    functionList.forEach(func => google.script.run.func());
    google.script.host.close();
  }

    Everything should work as expected.