Question

我想在用户按下Google App Scripts中的按钮时提醒用户。以下代码使用JS和HTML：

<html>    
    <body>
        <button onclick='myFunction()'> Press this </button>
    </body>
</html>
<script>
function myFunction()
{
   var b = document.getElementById('result');    
   b.innerHTML = 'You pressed the button.';    
   alert('The output has been modified');    
   return;    
}    
</script>

我将其输入HTML文件，但我无法理解如何运行它。它给了我一个只运行该功能的选项。当我这样做时，我得到以下错误：

ReferenceError: "document" is not defined

我尝试将其部署为网络应用，但即使这样也行不通。出现按钮，但单击它时没有任何反应。

请告诉我如何纠正这个问题。

Answer 1

通过阅读Html Service - Google Apps Script，您将找到大部分答案。您运行它的方法是创建已发布的script-as-web-app。

Html服务是一个选项，但您也可以使用UiApp服务 - 请查看Call a Google Apps Script function in HTML以获取使用该方法的示例。

使用myFunction()中的以下代码，您正在修改名为innerHTML的元素的内容（result）。这就是你动态改变显示页面的方式。

var b = document.getElementById('result');
b.innerHTML = 'You pressed the button.';

问题是，你没有拥有这样的元素。我们加一个<div>。为了使myFunction()的效果真正显而易见，我们将从一些内容开始，但这是可选的。重要的是我们为元素提供了一个id，在这种情况下为“result”，以匹配函数中已有的id。

<div id="result">You haven't pressed the button yet.</div>

这是最终的代码。除了“结果”更改之外，<script>块移动到<html>标记内，并且您的按钮中添加了一个ID，允许在点击后将其禁用。如屏幕截图所示，编辑器中将有两个文件。

Screenshot - Editor with two files

Code.gs

对此并不多，它完全如Creating HTML Files

中所述

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

myPage.html下

再次，从Html Service的示例开始。请注意.createHtmlOutputFromFile('myPage')中的doGet()包含脚本中html文件的名称。（如果因为剪切和粘贴我每次都搞砸了一美元，我会有两美元。）

<html>
  <script>
    function myFunction() {
      var b = document.getElementById('result');
      b.innerHTML = 'You pressed the button.';
      document.getElementById('button1').disabled = 'disabled';
      //alert('The output has been modified');
      return;
    }
  </script>

  <body>
    <button onclick='myFunction()' id='button1'>Press this</button>
    <div id="result">You haven't pressed the button yet.</div>
  </body>
</html>

Answer 2

请按照以下步骤操作：

将上述代码添加到HTML文件中。假设您将其保存为main.html

现在在code.gs文件中，添加以下代码：

function doGet() 
{

  return HtmlService.createHtmlOutputFromFile('main');

}

现在将其部署为网络应用程序。（您可能需要添加一个版本才能执行此操作。只需执行此操作。
现在，当您转到已部署应用程序的URL时，您会发现HTML输出正等着您！

使用谷歌应用程序脚本创建一个按钮和输入字段

2 个答案:

Code.gs

myPage.html下