1

I want to alert the user when he/she presses a button in Google App Scripts. The following code is in JS and 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>

I typed this into a HTML file, but I am not able to understand how to run this. It gives me an option to only run the function. And when I do this i get the following error:

ReferenceError: "document" is not defined

I tried to deploy this as a web app, but even this did not work. The button appears, but nothing happens when I click it.

please tell me how to rectify this issue.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
IcyFlame
  • 5,059
  • 21
  • 50
  • 74
  • "document" not defined because your script is out of scope - move script block inside of html block. – Mogsdad May 11 '13 at 16:52

2 Answers2

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>
Community
  • 1
  • 1
Mogsdad
  • 44,709
  • 21
  • 151
  • 275
0

Follow the following steps:

  1. add the above code to a HTML file. Suppose you save it as main.html

  2. Now in the code.gs file, add the following code:

    function doGet() 
{

  return HtmlService.createHtmlOutputFromFile('main');

}

  3. Now deploy this as a web app.(you may have to add a version to do this. Just do it.

  4. Now when you go to the URL that the app has been deployed to, you will find that the HTML output is waiting for you!
Rubén
  • 34,714
  • 9
  • 70
  • 166
IcyFlame
  • 5,059
  • 21
  • 50
  • 74