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>
1 answers
solution1
1 ACCPTED 2017-04-03 23:16:35
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.