google apps script - Why doesn't the javascript return and display text? -

in html , code.gs have page asking select date , try display calendar title event on date screen.

here html:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/redmond/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <div class="container" >     <div>       <h1>welcome page</h1>       <p>please select date below.</p>       <p>click here: <input type="text" name="date" id="datepicker" /><p>      </div> </div> <div id='test'></div>  <script> $("#datepicker").datepicker(); $("#datepicker").on("change", function () { var dateselected = $(this).val() var displaytext = google.script.run.listevents(dateselected); document.getelementbyid("test").innerhtml=displaytext; $("#test").text(displaytext); });  </script> 

here code.gs:

function doget(e) {   return htmlservice.createhtmloutputfromfile('index.html').setsandboxmode(htmlservice.sandboxmode.native); }  function listevents(dateselected) {   var calendar = calendarapp.getcalendarbyid('calendarid').geteventsforday(new date(dateselected));   if (calendar[0] == null) {     var text = 'nothing show';     return text;   }   else {     logger.log('number of events: ' + calendar[0].gettitle());   }  } 

in if (calendar ==null) section put logger.log('nothing today') logs fine. i'm thinking has way i'm returning or type thats being returned because on html page displays text 'undefined'.

if set jquery $("#test").text($(this).val()); displays date selected. when replace $(this).val() displaytext doesn't work.

i replaced line of code: var displaytext = google.script.run.listevents(dateselected); this: var displaytext = 'random text'; , sure enough string 'random text' shown on screen. must type of data gas script returns. able return string script or restriction? missing syntax?

i believe found answer here. want use .withsuccesshandler return value, this:

<script> function onsuccess(displaytext) {   document.getelementbyid("test").innerhtml=displaytext;   $("#test").text(displaytext); } $("#datepicker").datepicker(); $("#datepicker").on("change", function () { var dateselected = $(this).val() google.script.run.withsuccesshandler(onsuccess).listevents(dateselected); });  </script> 

the code above not tested, written based on working examples.