如何使用元素属性从 Javascript 传递变量答案

【问题标题】：How to use an element property to pass a variable from Javascript如何使用元素属性从 Javascript 传递变量
【发布时间】：2016-07-17 06:00:39
【问题描述】：

我正在尝试使用 HTML 模板发送电子邮件。

我看过这篇文章： (https://stackoverflow.com/questions/33178702/passing-variables-into-html-code)

这两个代码示例中的任何一个是否都可以将变量从 Javascript 传递到 HTML 模板？我的 javascript 变量被命名为 detail2、detail3、detail4、detail5 和 detail6。

第一次尝试：

<html>
  <head>
    <script>
    {
    
    var detail2 = document.getElementById("detail2").innerHTML;
    var detail3 = document.getElementById("detail3").innerHTML;
    var detail4 = document.getElementById("detail4").innerHTML;
    var detail5 = document.getElementById("detail5").innerHTML;
    var detail6 = document.getElementById("detail6").innerHTML;

      }
    }
    </script>
  </head>
  <body>
    
<p>
      <br>"Punctual? " document.getElementById('detail2').value<br>
      <br>"Attention to detail? " document.getElementById('detail3').value<br> 
      <br>"Overall Professionalism? " document.getElementById('detail4').value<br> 
      <br>"Date of Service: " document.getElementById('detail5').value<br>
      <br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>

  </body>
</html>

第二次尝试：

<html>
  <head>
    <script>
    {
    
    <input type="hidden" id="Detail2" value="detail2" />
    <input type="hidden" id="Detail3" value="detail3" />
    <input type="hidden" id="Detail4" value="detail4" />
    <input type="hidden" id="Detail5" value="detail5" />
    <input type="hidden" id="Detail6" value="detail6" />

      }
    }
    </script>
  </head>
  <body>
    
<p>
      <br>"Punctual? " document.getElementById('detail2').value<br>
      <br>"Attention to detail? " document.getElementById('detail3').value<br> 
      <br>"Overall Professionalism? " document.getElementById('detail4').value<br> 
      <br>"Date of Service: " document.getElementById('detail5').value<br>
      <br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>

  </body>
</html>

最后，GAS Dev上给出的方法如下，但这只会让我更加困惑。我敢肯定我在这方面已经太久了，我已经筋疲力尽了，我似乎无法在这个问题上看到答案。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

如果有人可以提供帮助，将不胜感激！

下面是来自 .gs 脚本文件的 Javascript。

function SendEmail() {
                                   // initialize data
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getActiveSheet();
 var range = sheet.getDataRange();
 var values = range.getValues();
                                   // iteration loop
    for (var i = 1; i<values.length; i++) {
                                   // current times for comparator
 var month = new Date().getMonth();          // returns today as 0-11 -- Jan is 0
 var day = new Date().getDate();             // returns today as 1-31
 var hour = new Date().getHours();           // returns today as 0-23
 var minute = new Date().getMinutes();       // returns today as 0-59
                                   // pull data from spreadsheet rows
 var company = values[i][0];
 var rating = values[i][1];
 var detail1 = values[i][2];
 var detail2 = values[i][3];
 var detail3 = values[i][4];
 var detail4 = values[i][5];
 var detail5 = values[i][6];
 var sendTime = values[i][7];
                                   // character send times for comparator
 var cSendMonth = sendTime.getMonth();        // returns sendMonth as 0-11 -- Jan is 0
 var cSendDay = sendTime.getDate();           // returns sendDay as 1-31
 var cSendHour = sendTime.getHours();         // returns sendHour as 0-23
 var cSendMinute = sendTime.getMinutes();     // returns sendMinute as 0-59
                                   // comparator
    if(cSendMonth == month) {
      if(cSendDay == day) {
        if(cSendHour == hour) {
          if(cSendMinute == minute) {
 var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
      MailApp.sendEmail({
          to: Session.getActiveUser().getEmail(),
          subject: 'Test Email markup2 - ' + new Date(),
          htmlBody: htmlBody,
  });
          } // end if minute test
        }// end if hour test
       }// end if day test
      }// end if month test
    }// end for loop
}

【问题讨论】：

唉，网页不是一厢情愿的。您最简单的版本是为容器提供 ID，并使用 innerHTML：<p id="det2"></p> 并使用 document.getElementById("det2").innerHTML=detail2;
重复stackoverflow.com/q/30033459/2213940
Apps Script 使用 JavaScript 作为它的服务器代码语言。我提到这一点是因为有时新用户会混淆什么是服务器代码和什么是客户端代码，即在浏览器中运行的代码。根据您的问题，我不确定原始值的来源。原始值是否来自电子表格？硬编码在.gs 脚本文件中？用户在 HTML 表单中输入？而且我不确定您希望最终结果是什么？您提到了一封电子邮件，但我没有看到任何电子邮件代码。
@SandyGood 没错，值来自电子表格，我正在使用 .gs 脚本文件将模板传输到 HTML。脚本文件是否必须先将值指定给 HTML，然后才能将它们带入 HTML 模板？我已将 javascript 添加到帖子中。
好的，我想我现在了解整体背景了。我会在答案中添加一些信息。

标签： javascript html dom google-apps-script

【解决方案1】：

你可以试试：

<html>
  <head>
    <script>
      (function() {
         var detail2 = document.getElementById("detail2").innerHTML;
         document.getElementById("detail2_val").innerHTML = detail2; 
      })();    
    </script>
  </head>
  <body>

   <p>
      <br>"Punctual?" <span id="detail2_val"></span><br>
   </p>

  </body>
</html>

【讨论】：

【解决方案2】：

目前，这一行：

var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();

不会评估模板。

使用的方法是：

createHtmlOutputFromFile('mail_template')

HtmlService 有很多用于创建 html 内容的方法。你需要使用：

HtmlService.createTemplateFromFile(filename).evaluate()

在您的整体工作流程中，有些事情可能会出错。如果这种情况是您正在写入数据，然后立即尝试读取刚刚写入的相同数据，则可能存在无法在如此短的时间内读取新数据的问题。

我会使用：

SpreadsheetApp.flush();

写入新数据之后，创建模板之前。

只有您的第三个 html 示例具有模板代码。要检索数据并将其放入模板中，scriptlet 必须运行一个函数，然后检索数据，或者数据必须位于全局变量中。全局变量的情况没有意义，因为您使用的是动态数据，因此需要运行一个函数来首先将数据放入全局变量中。该函数还不如直接返回数据。因此，您的 scriptlet 可能需要运行服务器端函数并将文本或 HTML 返回到 html 模板。您可能需要使用打印脚本。

Apps Script documentation - force printing scriptlets

【讨论】：