Web App Development with Google Apps Script/Responding to users

JavaScript for user interfacing

This book is all about leveraging your google account to make data-driven web applications. It will not cover how to create your user interfaces very much. In this section I'll just give some simple examples, some of which don't even follow best practices but are quick and dirty approaches you can try for some proof-of-principle approaches.

User clicked something

Nearly any element in html can have an onClick function added to it. This includes:

buttons
text (most easily done with span tags)
List items

onClick is not usually considered the proper way to do things, but if you're sure it's the only thing you want that element to do when the user is interacting it can work for you.^[1]

Here's some simple html/javascript code that would open an alert saying "you clicked me" when the user presses a button:

<button type="button" onClick="openAlert('press me')">press me</button> <!-- note the use of both types of quotes -->

<script>
function openAlert(text){
   alert(text);
   }
</script>

Update some text on the page

Alerts are annoying, don't use them. Instead have the user's actions change something on the page. Here's an update to the last example where now pressing the button puts some text on the page just below the button:

<button type="button" onClick="openAlert('press me')">press me</button> <!-- note the use of both types of quotes -->
<div id='emptyatfirst'></div>

<script>
function openAlert(text){
   document.getElementById('emptyatfirst').innerHTML=text;
   }
</script>

If you plan to make lots of changes to the text inside that div, you might instead want to make a global variable like this:^[2]

<button type="button" onClick="openAlert('press me')">press me</button> <!-- note the use of both types of quotes -->
<div id='emptyatfirst'></div>

<script>
// here's a global variable:
var emptyatfirst=document.getElementById('emptyatfirst');
function openAlert(text){
   emptyatfirst.innerHTML=text; // this uses the global variable
   }
</script>

Footnotes

↑ The proper method is to do is element.addEventListener('click', function() { /* do stuff here*/ }, false);
↑ Note that you can't do var emptyatfirst=document.getElementById('emptyatfirst').innerHTML; even if you thought that would save you some typing later.

[1] The proper method is to do is element.addEventListener('click', function() { /* do stuff here*/ }, false);

[2] Note that you can't do var emptyatfirst=document.getElementById('emptyatfirst').innerHTML; even if you thought that would save you some typing later.

[1]

[2]