Using Javascript in Google Apps Script

Question

I'm trying to create a simple input-output webapp and have been having the hardest time getting anything to work. The idea is to get user input from a textarea, add some simple html tags to it, and output it into another textarea. This is only to help some coworkers streamline their operations.

I settled on making a standalone Google Apps Script webapp, and using the HTML service to create my UI. The plan is to run Javascript in that HTML.

I've tested the following code on W3schools' TryIt Editor, and it works fine. It even works when I'm running it on StackOverflow's "run code snippet." But it won't function when I test my webapp.

Help?

<!DOCTYPE html>
<html>
  <body>
  <br>
    <textarea rows=12 cols= 50 align=left id="input" placeholder='Insert text here...'></textarea>
    <input type="button" value="Try It" onclick="myFunction()" />
    <textarea rows=12 cols= 50 align=right id="output" placeholder='Copy this text...' readonly></textarea>
  </body>
  <script type="text/JavaScript">
    <!--
    function myFunction() {
      var x = document.getElementById("input").value;
      document.getElementById("output").innerHTML = x;
    }
    -->
  </script>
</html>

Your code works fine in the above snippet. You'll need to either work out what is different about your own site, or link to your site so that others can help find the cause of the problem. But the problem is certainly not in your code above. — Obsidian Age
– Obsidian Age, Commented Apr 3, 2017 at 20:56
Just so there is no assumption. Do you have 2 "files" in your Apps script editor? 1 html file with your code above and a second Script File with a function which runs to start the html service? — Karl_S
– Karl_S, Commented Apr 3, 2017 at 21:17

Jack Brown · Accepted Answer · 2017-04-03 23:35:00Z

1

Well the solution/problem is simple. Your attribute values like cols = 50 needs to be in inverted commas. Like so:

cols ="50"

your Modified Code:

<!DOCTYPE html>
<html>
  <body>
  <br>
    <textarea rows="12" cols= "50" align="left" id="input" placeholder='Insert text here...'></textarea>
    <input type="button" value="Try It" onclick="myFunction()" />
    <textarea rows="12" cols= "50" align="right" id="output" placeholder='Copy this text...' readonly></textarea>
  </body>
  <script type="text/JavaScript">
    <!--
    function myFunction() {
      var x = document.getElementById("input").value;
      document.getElementById("output").innerHTML = x;
    }
    -->
  </script>
</html>

The reason this works and the previous one doesnt work is the way google HTMLservice evaluates the HTML code. Using your HTML code it evaluates your text area as this:

<textarea rows="12 cols= 50 align=left id="input" placeholder='Insert text here...'></textarea>

which as you can see sets the row attribute to

"12 cols =50 align=left id="

Hence when you run your function it is unable to find an element with id = "input" and throws an error in the console.

Hope that helps.

edited Apr 3, 2017 at 23:35

answered Apr 3, 2017 at 23:16

Jack Brown

5,8902 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user7810630 Over a year ago

Thanks Jack! That was it. I was pulling my hair out for a week trying to figure out why it wouldn't work.

Collectives™ on Stack Overflow

Using Javascript in Google Apps Script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related