a function calls google.script.run works onload but not the button onclick

Question

<script>
  window.onload = function() {
  google.script.run.withSuccessHandler(Loadthis)
  .getDataBySheetName('Bulk','all');
}

function Loadthis(data) {
  document.getElementById("output").innerHTML = "Loading...wait";
  var select = document.getElementById('trythis');
  var html = "";
  select.innerHTML = html;
  for ( var i in data) {
    html += "<tr>";
    for (var j=0;j<data[i].length;j++) {
      html += "<td>"+data[i][j]+"</td>";
    }
    html += "</tr>";
    select.innerHTML = html;
  }
  document.getElementById("output").innerHTML = "";
}

I am using google script. deployed as web. All these were possible digging this site. But I couldn't get this problem of mine solved through search.

I found in google script onclick button doesn't work always as expected. Anyhow in another html, I got it going with work around. Make a form and place the button after the < / form > then everytime it is called, it works flawlessly. But this one doesn't. Is it because I already called onload? should I make the page empty until the user (me) clicks the button? But I want to show default report at launch.

Problem is when I use a function in window.onload, the google.script.run.... goes onto withSuccessHandler to be done. But when I declare the function separately and to let it happen when onclick a button, google.script.run... goes onto withFailureHandler.

document.getElementById("List").onclick = function() {
  var sheetname = 'cNow';
  alert('Am I called '+sheetname);
  getit(sheetname);
}

Here, alert appear. So it must have been called.

then

function getit(sheetname){
  var div = document.getElementById('output');
  div.innerHTML = 'Am I called '+sheetname;
  google.script.run
        .withSuccessHandler(Loadthis)
        .withFailureHandler(onFailure)
        .getDataBySheetName(sheetname,'all');
}

Then, after this, I can see the server side Logger.log as handled successfully just like it was called in onload.

But next thing happening is onFailure is called. So instead of calling same Loadthis function, here I made different and copyof Loadthis , onSuccess and called

function getit(sheetname){
  var div = document.getElementById('output');
  div.innerHTML = 'Am I called '+sheetname;
  google.script.run
    .withSuccessHandler(onSucess)
    .withFailureHandler(onFailure)
    .getDataBySheetName(sheetname,'all');
}

function onSuccess(data2) {
     var div = document.getElementById('output');
     div.innerHTML = "Loading...wait";

     var select = document.getElementById('trythis2');
     var html = "";
     select.innerHTML = html;
     for ( var i in data2) {
       html += "<tr>";
       for (var j=0;j<data2[i].length;j++) {
         html += "<td>"+data2[i][j]+"</td>";
       }
       html += "</tr>";
       select.innerHTML = html;
     }
     document.getElementById("output")
        .innerHTML = "Now list loaded...";
}
function onFailure(status) {
     var div = document.getElementById('output');
     div.innerHTML = 'failed';
}     

Still onFailure is called. As for process going on, the 'div - output' shows at first 'Am I called Now' then 'failed'. Same, serverside Logger.log shows successful.

I cannot guess but if this is a thing as it is, I will have to create another html and code same function all the way same but just one change which googlesheet to be called. Which is waste of time, energy and resource.

** I have put these script bottom of the body in case the elements are not loaded yet. And made windows.onload to call the onSuccess and it works as it supposed to be.

Could you please suggest workaround except to make each html separately?

My last resort is to create this javascript file separately and use it to include. Then use iframe to call different pages in there as the button clicks....... I want to build one-page-solution ultimately..though.

recent development: 1. seperated the html but still cNow won't work. 2. found that sheet's structure and Bulk's structure is same but something wrong in the data value. when I copied the bulk's data into the one which was not showing, it showed. no need to seperate html but problem is in the data.

and it is solved as problem lied in the column 'timestamp'. I was creating deleterow for old data. Then again this sheet's timestamp is not compared. Therefore I rememebered that I manipulated this column earlier.
Now I am going to learn how to data validation in the sheet and point to note.

If the data is retrieved from the google sheet and var data 's value in one column has different format in some rows, although the data and all the function is called successfully, it returns failure. Just to note so that new scripters like me can get benefit.

Answer 1

Summary of the answer is to use getDisplayValues instead of getValues if the data is going to be handled with javascript.

It seemed the coding problem in the beginning but it was on the data values. Then I found time/date format's are not supported to pass onto Javascript.

Here is the error returned withFailureHandler.

ScriptError: The script completed but the returned value is not a supported return type.

I found one way to use array push. But I couldn't figure out how it works and didn't solve my problem.

var options=[];
for(var i=0;i<srange.length;i++)
{
  options.push(srange[i][3]);
}

(srange is where I pulled data with getValues.) One drawback of this solution is even if it works, it will add one more thing to run "for loop" (in case datasheet is long, it will take too long to do this, isn't it?). And in my case, the list won't show up still.

So I googled 'google script how to getvalues as string of google sheet' then

Difference between getValue() and getDisplayValue() on google app ... came up.

Without even opening it up, I changed where I call getValues to getDisplayValues().

sheet.getDataRange().getDisplayValues();

And that easy.

Hope this helps anyone who are having this kind of problem.