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

Question

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

Code.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 的解决方案！这是完整的代码，它还添加了预处理消息以及在 google 脚本应用程序完成调用函数后显示的 post 处理消息：

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

Code.gs

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

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

Answer 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

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

Creating a very simple Dynamic Google Script Web App

html

javascript

web-applications

dynamic

google-apps-script

修改点：

修改后的脚本：

参考：