Advertisement

The Java Script Results not showing in HTML

google-apps-script html javascript web-applications

I wrote a GAS code to check if the employee is In or Not in (extracting data from Google sheets). The console log give me the right answer but When I click on the button the answer doesn’t appear at the front end. Can you help me to troubleshoot on where I went wrong?

<div>
<script>
 function onStatus(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;
 
  }
      }
document.getElementById('status').innerHTML= notify;       
      }
     
    </script>
<button onclick="onStatus()">Check Status</button>

 <font color='Green' id="status" ></font>
</div>

JavaScript
​x
 
<div>
<script>
 function onStatus(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;
 
  }
      }
document.getElementById('status').innerHTML= notify;       
      }
     
    </script>
<button onclick="onStatus()">Check Status</button>
​
 <font color='Green' id="status" ></font>
</div>
​

Advertisement

Answer

Google provides a very good Client-to-Server Communication guide that I highly suggest you read to get a better understanding of how this works.

You cannot put apps script code (e.g. SpreadsheetApp.getActiveSpreadsheet()) in your frontend scripts. That code has to be run by the apps script server in the backend and you’ll then call it using a google.script.run call.

Code.gs

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

function checkStatus() { 
  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){
      return employee + " You Are In";
    }
  }
}

JavaScript
 
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index');
}
​
function checkStatus() { 
  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){
      return employee + " You Are In";
    }
  }
}
​

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <button onclick="onStatus()">Check Status</button>
      <font color='Green' id="status" ></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>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <button onclick="onStatus()">Check Status</button>
      <font color='Green' id="status" ></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>
</html>
​

Advertisement