1

我想在用户按下 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

我尝试将其部署为 Web 应用程序，但即使这样也不起作用。该按钮出现，但是当我单击它时没有任何反应。

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

4

2 回答 2

5

You'll find most of your answer by reading Html Service - Google Apps Script. The way you run it is to create a published script-as-web-app.

The Html Service is one option, but you could also use the UiApp Service - take a look at Call a Google Apps Script function in HTML for an example that uses that approach instead.

With the following code in myFunction(), you are modifying the content (innerHTML) of an element named result. That's how you will dynamically change the displayed page.

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

Problem is, you don't have such an element. Let's add one, a <div>. Just to make the effect of myFunction() really obvious, we'll start with some content, but that's optional. The important bit is that we provide an id for the element, "result" in this case, to match the id already in the function.

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

Here's the final code. In addition to the "result" change, the <script> block moved inside the <html> tags, and an id was added to your button allowing it to be disabled after clicking. As shown in the screenshot, you will have two files in the editor.

Screenshot - Editor with two files

Code.gs

Not much to this, it's exactly as described in Creating HTML Files

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

myPage.html

Again, start with the examples from Html Service. Note that .createHtmlOutputFromFile('myPage') in the doGet() contains the name of the html file in your script. (If I had a dollar for every time I screwed that up because of cut & paste, I'd have two dollars.)

<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>
于 2013-05-11T13:58:56.183 回答
0

请按照以下步骤操作：

  1. 将上面的代码添加到 HTML 文件中。假设您将其另存为main.html

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

    function doGet() 
{

  return HtmlService.createHtmlOutputFromFile('main');

}

  3. 现在将其部署为 Web 应用程序。（您可能必须添加一个版本才能执行此操作。只需执行此操作。

  4. 现在，当您转到应用程序已部署到的 URL 时，您会发现 HTML 输出正在等待您！
于 2013-05-11T09:00:49.450 回答