创建一个非常简单的 Dynamic Google Script Web App答案

【问题标题】：Creating a very simple Dynamic Google Script Web App创建一个非常简单的 Dynamic Google Script Web App
【发布时间】：2020-10-09 00:21:00
【问题描述】：

好的，我在开始设置动态独立谷歌脚本时遇到了困难。我无法获得对 html 进行任何动态更改的按钮。我认为单击该按钮将调用 google 脚本代码函数并对生成的 Index.html 进行更改。我错过了什么？

代码.gs：

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

function DoSomething() {
  var obj = document.getElementById("status");
  alert("kachow");
  obj.innerText = "It's magic!";    
}

Index.html

<!DOCTYPE html>
<html>
  <body>
  <button id="submitButton">Submit</button>
  <br />
  <div id="status">Static</div>
  <br />
  <script>
  document.getElementById('submitButton').addEventListener('click', function() {
  google.script.run.DoSomething();
  });
  </script>  
  </body>  
</html>

谢谢！

更新解决方案：感谢@Tanaike 的解决方案！这是完整的代码，它还添加了一条预处理消息以及一条在谷歌脚本应用程序完成调用函数后显示的后处理消息：

<!DOCTYPE html>
<html>
  <body>
  <button id="submitButton">Submit</button>
  <br />
  <div id="status">Static</div>
  <br />
  <script>
  document.getElementById('submitButton').addEventListener('click', function() { 
    var obj = document.getElementById('status');
    obj.innerText = 'Processing. Please wait...';
    google.script.run.withSuccessHandler(value => {
      var obj = document.getElementById("status");
      obj.innerText = value;
    }).DoSomething();
  });
  </script>
  </body>
</html>

代码.gs

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

function DoSomething() {
  return "It's magic!";
}

【问题讨论】：

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

【解决方案1】：

修改点：

在您的脚本中，DoSomething() 似乎不是 Google Apps 脚本。我认为这是Javascript。我认为这是您的问题的原因。所以当下面的修改完成后，我认为脚本可以工作了。

  <!DOCTYPE html>
  <html>
    <body>
    <button id="submitButton">Submit</button>
    <br />
    <div id="status">Static</div>
    <br />
    <script>
    document.getElementById('submitButton').addEventListener('click', function() {
  //    google.script.run.DoSomething();
      DoSomething();
    });
    function DoSomething() {
      var obj = document.getElementById("status");
      alert("kachow");
      obj.innerText = "It's magic!";    
    }
    </script>  
    </body>  
  </html>

但我认为您可能希望在 Javascript 端和 Google Apps 脚本之间进行通信。所以在这种情况下，请进行如下修改。

修改脚本：

Code.gs：

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

function DoSomething() {
  return "It's magic!";
}

Index.html:

<!DOCTYPE html>
<html>
  <body>
  <button id="submitButton">Submit</button>
  <br />
  <div id="status">Static</div>
  <br />
  <script>
  document.getElementById('submitButton').addEventListener('click', function() {
    google.script.run.withSuccessHandler(value => {
      var obj = document.getElementById("status");
      alert("kachow");
      obj.innerText = value;
    }).DoSomething();
  });
  </script>
  </body>
</html>

参考：

Class google.script.run

【讨论】：

你是个天才！我想的很复杂。我不得不稍微扭曲一下我的逻辑。哦，是的，记录在案的是我对通信感兴趣的后一个代码。再次感谢！！！
高级问题。当我单击按钮时效果很好，我可以处理一个函数，当它完成后，我可以通过这种方式通知用户一条新消息。如果我想在运行 DoSomething 函数时显示“处理中...”消息并在完成后更改状态。
知道了，谢谢！我添加了 "var obj = document.getElementById('status');obj.innerText = 'Processing. Please wait...';" 作为 withSuccessHandler 之前的第一个执行语句:-)跨度>
感谢您的回复。很高兴您的问题得到解决。