Java 脚本结果未在 HTML 中显示答案

【问题标题】：The Java Script Results not showing in HTMLJava 脚本结果未在 HTML 中显示
【发布时间】：2021-03-12 06:21:23
【问题描述】：

我编写了一个 GAS 代码来检查员工是否在或不在（从 Google 工作表中提取数据）。控制台日志给了我正确的答案，但是当我点击按钮时，答案没有出现在前端。你能帮我解决我哪里出错了吗？

<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>

【问题讨论】：

你不能把这样的应用脚本代码放在前端。请阅读client-to-server communication guide。
@Diego 我已经在 GAS 中添加了 doGet() 函数。我得到客户端或前端的按钮。但如果我点击它，什么也不会发生。我不知道出了什么问题:(

标签： javascript html google-apps-script web-applications

【解决方案1】：

Google 提供了一个非常好的Client-to-Server Communication guide，我强烈建议您阅读以更好地了解其工作原理。

您不能将应用程序脚本代码（例如SpreadsheetApp.getActiveSpreadsheet()）放在前端脚本中。该代码必须由后端的应用脚本服务器运行，然后您将使用 google.script.run 调用来调用它。

代码.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";
    }
  }
}

索引.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>

【讨论】：

成功了 :) 还有一个问题，如果我想一键运行 2 个功能，这个修改会起作用吗？ onclick="onStatus();onStatus2();" ?
@MuhammedAadhil 是的，但我建议您编写一个单独的函数来处理它。 function checkStatus() { actionOne(); actionTwo(); }
谢谢 :) 在测试您的代码后，我遇到了另一个问题。它工作正常，但是当我刷新状态消失时，我想保持状态可见，直到员工下班。你能好心帮助我吗:)
@MuhammedAadhil 最好发布一个关于您想要完成的后续修改的新问题，以便其他读者可以从这两个问题中受益。
@Marios 我又问了一个问题*.com/questions/65076424/…