I'm just starting to use Google Apps Script's HTML service to create a UI. Starting out very basic and Google's documentation seems to be very incomplete (let me know if I missed something). I followed this example: https://developers.google.com/apps-script/guides/html/reference/run#withUserObject(Object) and got it to work, but I don't understand where the "this" came from (in the HTML code) and how the order of operations works there.
In order to wrap my mind around this, I'm trying to make something where I can put in text, push a button, and it will display the same text in all-caps. Here's what I've got so far:
Google Script:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function capitalize(input){
return input.toUpperCase();
}
</script>
</head>
<body>
Put some text here: <input type="text" name="words"><br>
<input name="button" type="button" value="CAPITALIZE" onclick="google.script.run
.withSuccessHandler(capitalize)
.withUserObject(words)"><br><br>
Here is your text:
</body>
</html>
Any help is GREATLY appreciated!
The documentation for .gs is actually really good. Don't go into any language's docs expecting "full explanations" for every use case though.
google.script.run is only needed when you want to pass data to a server-side .gs function ( as documented at the top of the page you linked to ).
What you're asking for seems to be all client-side manipulation though, with no need to pass data to a .gs function.
try these adjustments:
// get value of a text box and set it into html of a <span> element
function capitalize(){
document.getElementById('userInput').innerHTML =
document.getElementById("words").value.toUpperCase();
}
onclick="capitalize()"><br><br>
Here is your text:<span id="userInput"></span>
Related
I am relatively new to html/ javascript, and I am trying to use google sites to build a simple store, that will send orders to a google sheet. At present, I am having difficulty passing data between iframes. In the first iframe, I am testing this snippet of code:
<!DOCTYPE html>
<html>
<input type="text" id="texttest">
<button onclick="store()" type="button">Store</button>
</html>
<script type="text/javascript">
function store() {
var myinput = document.getElementById("texttest");
sessionStorage.setItem("texttest", myinput.value);
</script>
And in the second iframe, this snippet:
<!DOCTYPE html>
<html>
<p id="output"></p>
</html>
<script>
document.getElementByID("output").innerHTML = sessionStorage.getItem("texttest");
</script>
The idea is essentially for a user to scroll through the option, input in certain fields the type and quantity of the item they want, and for those selections to be collected at the end and sent to a google sheet. However, the code below is not displaying the text entered in the "texttest" field in the "output" iframe. Any ideas or suggestions would be welcome!
I am trying to get a very simple javascript project going, but I cannot get any function to execute. Here is a simple example. It is obviously just an example. I have tried everything I can think of to get the browser to recognize that I am trying to call a function that has been defined, but it never does anything but just display the text, rather than call anything. In the below example, I simply get a page with the text: "varTimesTwo(3);"
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
</script>
varTimesTwo(3);
</body>
</html>
your code is wrong, you have to place varTimesTwo(3); inside the script tag, like this:
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
varTimesTwo(3);
</script>
</body>
</html>
Keep all JavaScript code in the script tags, or better yet, in a file
separate from the html file using <script src="myjsfile.js"></script>
You can use document.write(string) to write a string to the document.
This string is treated as HTML so you need to use <p>text</p> or <br> to get line breaks.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
document.write("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
Alternatively, you can use window.alert(string) or simply alert(string) to pop up an alert box. But if you have turned off pop-ups in the browser, these will not pop up.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
alert("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
console.log(string) writes to the debugging console, which you can see on many browsers with either control-shift-J or F12.
The javascript debugging console is also useful for learning javascript without messing with input and output. Anything you type in the JS console is immediately executed, so you can define functions there and play with them without having to write additional code to write the output or read input.
Finally, these techniques are insufficient for most websites as they are actually used. Instead, what is done is to define an html container element and change the text or html that is inside. jQuery provides a browser-independent method of manipulating the document to change items on the page.
I've found several resources that supposedly show one how to make a collapsible list in Google Sites, but nothing seems to work. I've tried inserting an HTML box into the site, as well as modifying the HTML source code. It seems like Google Sites is just stripping away any javascript. Is there a way around this, does Google have a feature to make this happen (that is not the list template, that will not do for my purposes)?
Here are the resources I've tried:
tutorials.seowebpower.com/google-sites-advanced/collapsible-table
sites.cognitivescience.co/knowledgebase/resources/using-google-sites/creating-information-rich-gsites-pages
How to create expandable FAQ page in HTML?
support.google.com/sites/search?q=list
I fiddled with one of the answers in the linked question and it seems to work for me now, giving two questions with hidden answers which toggle hide/show, you should be able to adjust that to be a folding list once the hide/show functionality is there.
This in an htmlbox
<script>
function toggleElement(myid)
{
if(document.getElementById(myid).style.display == 'none')
{
document.getElementById(myid).style.display = 'block';
}
else
{
document.getElementById(myid).style.display = 'none';
}
}
</script>
<hr>
<button id="q1">Is this question one?</button>
<div id="a1" style="display:none">
This is the first answer.
</div>
<script>
document.getElementById('q1').onclick=function(event) {toggleElement("a1"); };
</script>
<hr>
<button id="q2">Is this question two?</button>
<div id="a2" style="display:none">
This is the second answer.
</div>
<script>
document.getElementById('q2').onclick=function(event) {toggleElement("a2"); };
</script>
<hr>
see it in action at
https://sites.google.com/site/dpcarlisle/fold
(first click takes forever for things to load up here, not sure if google sites allows enough javascript to preload things, but after first use it works as expected)
The documentation provided in https://developers.google.com/apps-script/guides/html/ can help you.
After creating a normal JavaScript collapsible list the code has to be pasted in the Index.html file.
Once you have your Code.gs and Index.html files, publish the project: Publish → Deploy as Web app, and pick «Anyone, even anonymous».
Copy the «Current web app URL:» and embed it in your Google Sites page: Insert → Apps Script.
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- YOUR JAVASCRIPT CODE GOES HERE -->
</body>
</html>
EDIT:[Honestly this works fine you can read my edit comment below.]
So I am very new to JavaScript. This book I have tells me that I can write the script code in another file that has a .js extension. What it doesn't tell me is what should be in that .js extension.
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body>
The content of
your page goes here.
</body>
</html>
Lets say I wanted to make an alert message in the java script file. Inside the "fileName.js" would all I write be:
alert("This is an alert box");
and then save it and call it quits? Cause that is what I have so far and nothing doing.
EDIT:
Ok I want to add this in for anyone in trouble like I was. Turns out, this works perfectly. The comments below are a great help for further information. But the thing I did not realize was that on my Mac I needed to start the path to file at /Users. I feel dumb but at least I figured it out. Thanks all for your help.
Use " instead of ”:
<script src="path/to/file/fileName.js"></script>
^ ^
Generally your js files will have objects and Methods that are called/used from you main page.
So you html wiil look like :
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body onload="showAlert();">
The content of
your page goes here.
</body>
</html>
and you js will look like:
function showAlert(){
alert("This is an alert box");
}
Look into events and listeners. For example, if you want the alert to come up when the page loads, your html file would have:
<body onload="functionName()">
</body>
And you javascript file would have:
function functionName() {
alert("alert message");
}
Usually you would write your Javascript code as a series of functions that you can call whenever you need. So yes, you can write a single statement the way you did but most times its functions.
I am just getting started with HTML/JavaScript, and I have a simple question. I am attempting to call a js function from a separate script source, but am having a bit of trouble. My function script (date_button_function.js) reads:
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
In order to call on this function, my code looks like this:
<html>
<head>
<script type="text/javascript" src="date_button_functoin.js"></script>
<body>
<h1>Testing the Date</h1>
<p id="date">Click below to see the date.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
When I actually write out the displayDate function in the HTML script, it runs just fine. However, when calling the function, it does not work. If someone could let me know my syntax error, that would be great.
You're not closing your head tag, that's probably your issue there. Also, as stated on the comments, the name of the js file is wrong, should read "date_button_function.js" instead of "date_button_functoin.js"