I am creating a tool that uses google apps script html service to create a page that will create a new google doc for the selected subject, using the values in the text entry box if they have been edited, and using the default value for the selected subject if not, however I can't use document.getElementById(), and I was wondering if there were any alternatives. My code is down below.
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index.html');
}
function customDoc(subject) {
var formattedDate = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), 'M/d/yyyy');
var la=['teacher@example.com','LA for '+ formattedDate]
var math=['teacher@example.com', 'math for '+ formattedDate]
var spanish=['teacher@example.com','Espanol para ' +formattedDate]
var science = ['teacher@example.com','science for '+formattedDate]
var is = ['teacher@example.com','I&S for '+formattedDate]
var cycle= [la, science, is, spanish, math]
var e = null
var d = null
var s = null
var m = null
if (Document.getElementById('Email') === ' '){
e=cycle[subject][1] }
else {e=Document.getElementById('Email')}
if (Document.getElementById('docName') === ' '){
d=cycle[subject][2] }
else {d=Document.getElementById('docName')}
if (Document.getElementById('Sub') === ' '){
s=cycle[subject][2] }
else {s=Document.getElementById('Sub')}
if (Document.getElementById('message') === ' '){
m = ' '}
else {m=Document.getElementById('message')}
var doc = DocumentApp.create(d)
var doccu = doc.getUrl();
var body = m + ' ' + doccu
GmailApp.sendEmail(e, s, body)
console.log(e);
console.log(s);
console.log(body);
console.log(doccu);
console.log(d);
}<!DOCTYPE html>
<html>
<body>
<h1>CREATE DOC</h1>
<p>Email</p>
<input type="text" id="Email" value=" " style="border-radius: 20px; border-color: crimson; border-width: 20px" />
<p style="font-family: Times New Roman, Times, serif">Doc name</p>
<input type="text" id="docName" value=" " style="border-radius: 20px; border-color: crimson; border-width: 20px" />
<p>Subject</p>
<input type="text" id="Sub" value=" " style="border-radius: 20px; border-color: crimson; border-width: 20px" />
<p>message</p>
<input type="text" id="message" value=" " style="border-radius: 20px; border-color: crimson; border-width: 20px" />
<h2>Fill blanks for subject:</h2>
<button id="1" onclick="google.script.run.customDoc(this.id)">LA</button>
<button id="2" onclick="google.script.run.customDoc(this.id)">Science</button>
<button id="3" onclick="google.script.run.customDoc(this.id)">Individuals and societies</button>
<button id="4" onclick="google.script.run.customDoc(this.id)">Spanish</button>
<button id="5" onclick="google.script.run.customDoc(this.id)">math</button>
</body>
</html>document.getElementById() is a client-side function, so it needs to be within your HTML. (Remember that customDoc() is a server-side function.)
You can call document.getElementById('docName') to get the doc name text box, and then access its value property to get the text that's inside the text box. Then you can pass this value along with the subject name to customDoc().
Follow the same approach for getting the other text box values from your HTML inputs.
In my response to your original question, I decided to repeat onclick="google.script.run.customDoc(this.id)" for clarity. Now there are other steps you need to take before calling customDoc(), so it's better to call an intermediary function. Instead of specifying onclick for each button, you can add an event listener to all of the buttons. So anytime a button is clicked, the intermediary getValuesAndCreateDoc() function is called.
<!DOCTYPE html>
<html>
<style>
input {
border-radius: 20px;
border-color: crimson;
border-width: 20px;
}
</style>
<body>
<h1>CREATE DOC</h1>
<p>Email</p>
<input type="text" id="Email">
<p style="font-family: Times New Roman, Times, serif">Doc name</p>
<input type="text" id="docName">
<p>Subject</p>
<input type="text" id="Sub">
<p>message</p>
<input type="text" id="message">
<h2>Fill blanks for subject:</h2>
<button id="la">LA</button>
<button id="science">Science</button>
<button id="is">Individuals and societies</button>
<button id="spanish">Spanish</button>
<button id="math">math</button>
<script>
// Run getValuesAndCreateDoc() when a button is clicked
const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', getValuesAndCreateDoc);
}
/**
* Get the user values and create the document.
* @param {Event} event
*/
function getValuesAndCreateDoc(event) {
const clicked = event.target.id;
const email = document.getElementById('Email').value.trim();
const docName = document.getElementById('docName').value.trim();
const sub = document.getElementById('Sub').value.trim();
const message = document.getElementById('message').value.trim();
console.log('Clicked: ' + clicked);
console.log('Email: ' + email);
console.log('Doc Name: ' + docName);
console.log('Sub: ' + sub);
console.log('Message: ' + message);
google.script.run.customDoc(clicked, email, docName, sub, message);
}
</script>
</body>
</html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index.html');
}
function customDoc(clickedId, email, docName, sub, message) {
var formattedDate = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), 'M/d/yyyy');
var classes = {
'math': {
email: 'teacher@example.com',
docName: 'math for ' + formattedDate
},
'la': {
email: 'teacher@example.com',
docName: 'la for ' + formattedDate
},
'science': {
email: 'teacher@example.com',
docName: 'science for ' + formattedDate
},
'is': {
email: 'teacher@example.com',
docName: 'I&S for ' + formattedDate
},
'spanish': {
email: 'teacher@example.com',
docName: 'Español para ' + formattedDate
}
};
var selectedClass = classes[clickedId];
// Set defaults
if (email == '') {
email = selectedClass.email;
}
if (docName == '') {
docName = selectedClass.docName;
}
if (sub == '') {
sub = clickedId;
}
if (message == '') {
message = 'Default message';
}
console.log('Today: ' + formattedDate);
console.log('Clicked ID: ' + clickedId);
console.log('Email: ' + email);
console.log('Doc Name: ' + docName);
console.log('Sub: ' + sub);
console.log('Message: ' + message);
// Create the Google Doc
var doc = DocumentApp.create(docName);
// Send the email
GmailApp.sendEmail(email, sub, message + ' ' + doc.getUrl());
}