How keep the Status keep appearing on JavaScript function to HTML

问题

This is a continuation of previous question I made in this forum.

I made some changes in the code by adding else condition. What I'm trying to work out is to show the current status as the page loads. the current code shows the status only if the button get clicked.

How can I get the current status appear as the page loads and the status get updated when button get clicked.

CODE.GS

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function checkStatus(notify) { 
  var employee = "John Peter";
  var ss = SpreadsheetApp.getActiveSpreadsheet();        
  var mainSheet = ss.getSheetByName("MAIN");
  var data = mainSheet.getDataRange().getValues();
  
  for (var j = 0; j < data.length; j++){
    var row = data[j];
    var mainSheet2 = row[4];
    var mainSheet3 = row[0];
    var status = (mainSheet2 =="IN" && mainSheet3 == employee) ; 
    if (status == true){
      var notify = employee +" You Are In"
      return notify;
      }
    else{
     var status = (mainSheet2 =="OUT" && mainSheet3 == employee) ; 
    if (status == true){
      var notify2 = employee +" You Are Out"
      return notify2;
  }
}
  }
}

Index.html

<body>
    <div>
      <button onclick="onStatus()">Check Status</button>
      <font color='Green' id="status" onbeforeprint="onStatus" ></font>
      </div>
      
    

    <script>
      function onStatus() {
        google.script.run.withSuccessHandler(updateStatus) // Send the backend result to updateStatus()
          .checkStatus(); // Call the backend function
      }

      function updateStatus(notify) {
        document.getElementById('status').innerHTML= notify;
      }
      
     
      
    </script>
  </body>

回答1:

You can invoke this function at page load like below. Add this script at then end, just before your body tag ends.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
    // The code in this function runs when the page is loaded.
    $(function() {
     google.script.run.withSuccessHandler(updateStatus)
              .checkStatus(); 
    });
</script>

来源：https://stackoverflow.com/questions/65076424/how-keep-the-status-keep-appearing-on-javascript-function-to-html

标签

javascript

html

google-apps-script

web-applications