在 google 应用程序脚本中不使用 document.getElementById() 获取文本输入框的值？

Question

我正在创建一个工具，该工具使用 google 应用程序脚本 html 服务来创建一个页面，该页面将使用文本输入框，如果它们已被编辑，如果没有，则使用所选主题的默认值，但是我不能使用 document.getElementById()，我想知道是否有其他选择。我的代码在下面。

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>

Answer 1

document.getElementById() 是一个 client-side 函数，因此它需要在您的 HTML 中。（请记住 customDoc() 是一个 server-side 函数。）

您可以调用 document.getElementById('docName') 获取文档名称文本框，然后访问其 value 属性获取文本框内的文本。然后您可以将此值与主题名称一起传递给 customDoc().

按照相同的方法从您的 HTML 输入中获取其他文本框值。

在我的 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所有的按钮。因此，只要单击一个按钮，就会调用中间 getValuesAndCreateDoc() 函数。

<!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());
}

在 google 应用程序脚本中不使用 document.getElementById() 获取文本输入框的值？

Get value of a text entry box without using document.getElementById() in google apps script?

html

javascript

getelementbyid

google-apps-script