使用Javascript循环HTML元素时获取名称和链接值

我正在为侧边栏的电子表格制作一个web应用程序

尝试处理实现以下条件的事件侦听器：

• 选中复选框时（具有相应名称和该名称的日历链接）
• 选择两个日期
• 然后点击按钮

完成后，将从后端调用一个函数，该函数获取该名称的事件并将其记录到工作表中

我无法在循环中获取名称和日历的值。也不知道用什么方法来表达。我试着用不同的方法来处理它——没有运气

我最终将所有问题缩小到以下两个部分：

1） 如何以最佳方式将数据加载到侧栏

2） 如何在用户与这些元素交互后遍历这些数据并获取值（取决于第1部分）

如果有人能多帮我一点（一些简单的解决方案），我将不胜感激

以下是用于在html文件中使用GAS的Scriptlet的变体：

<? for (var i = 0; i < loopNamesForSidebar().names.length; i++) {  ?>
    <label>
       <input type="checkbox" class="filled-in check" checked="checked" />
       <span>
         <div class="collection">     
           <a href=" <?= loopNamesForSidebar().calendars[i] ?>" class="collection-item" >
             <?= loopNamesForSidebar().names[i]  ?>
           </a>
         </div>
       </span>
<? } ?>
    </label>

根据，您应该异步加载任何API/__;服务调用输出。我只会对普通计算/检索的数据使用模板求值，例如来自

PropertiesService

、

CacheService

、静态定义或基于输入参数的简单查找（即

doGet

和

doPost

触发函数的查询字符串/有效负载数据）。如果平均耗时超过四分之一秒，则同步使用速度太慢

因此：

假设您已正确设置了GS和HTML文件的其他部分，则.HTML的

标记之一可能如下所示：

$(document).ready(() => loadServerData()); // jQuery
function loadServerData() {
  const TASK = google.script.run.withSuccessHandler(useNames); // has implicit failure handler of `console`
  // Schedule this to be run every so often
  const intervalMS = 10 * 60 * 1000; // 10 minutes
  setInterval(sheetName => TASK.shouldRunAsync(sheetName), intervalMS, "Names");
  // Invoke promptly too.
  TASK.shouldRunAsync("Names");
  console.log(new Date(), "Set schedule & invoked server function");
}
function useNames(serverValue, userObject) {
  console.log(new Date(), "Got Value from server", serverValue);
  // use the return value to do stuff, e.g.
  const cbDiv = $("id of div containing checkboxes"); // jQuery
  /** could add code here to read existing checkbox data, and
      use that to maintain checked/unchecked state throughout loads */
  cbDiv.innerHTML = serverValue.map((name, idx) => `<p id="${name}">${idx + 1}: ${name}</p>`).join("");
}

$（document）.ready（（）=>loadServerData（））；//jQuery
函数loadServerData（）{
const TASK=google.script.run.withSuccessHandler（useNames）；//具有`控制台'的隐式失败处理程序`
//计划每隔一段时间运行一次
常数间隔=10*60*1000；//10分钟
setInterval（sheetName=>TASK.shouldRunAsync（sheetName），interval，“name”）；
//也要及时调用。
TASK.shouldRunAsync（“名称”）；
log（新日期（），“设置计划和调用的服务器函数”）；
}
函数useNames（serverValue、userObject）{
log（新日期（），“从服务器获取值”，serverValue）；
//使用返回值做一些事情，例如。
const cbDiv=$（“包含复选框的div的id”）；//jQuery
/**可以在此处添加代码以读取现有复选框数据，以及
使用该选项可在整个加载过程中保持选中/未选中状态*/
cbDiv.innerHTML=serverValue.map（（name，idx）=>`
${idx+1}:${name}
`）；
}

一如既往，请确保您非常熟悉可序列化数据类型和客户机-服务器通信模型：

其他参考文献

根据，您应该异步加载任何API/\uuuuuuuuuuu服务调用输出。我只会对普通计算/检索的数据使用模板求值，例如来自

PropertiesService

、

CacheService

、静态定义或基于输入参数的简单查找（即

doGet

和

doPost

触发函数的查询字符串/有效负载数据）。如果平均耗时超过四分之一秒，则同步使用速度太慢

因此：

假设您已正确设置了GS和HTML文件的其他部分，则.HTML的

标记之一可能如下所示：

$(document).ready(() => loadServerData()); // jQuery
function loadServerData() {
  const TASK = google.script.run.withSuccessHandler(useNames); // has implicit failure handler of `console`
  // Schedule this to be run every so often
  const intervalMS = 10 * 60 * 1000; // 10 minutes
  setInterval(sheetName => TASK.shouldRunAsync(sheetName), intervalMS, "Names");
  // Invoke promptly too.
  TASK.shouldRunAsync("Names");
  console.log(new Date(), "Set schedule & invoked server function");
}
function useNames(serverValue, userObject) {
  console.log(new Date(), "Got Value from server", serverValue);
  // use the return value to do stuff, e.g.
  const cbDiv = $("id of div containing checkboxes"); // jQuery
  /** could add code here to read existing checkbox data, and
      use that to maintain checked/unchecked state throughout loads */
  cbDiv.innerHTML = serverValue.map((name, idx) => `<p id="${name}">${idx + 1}: ${name}</p>`).join("");
}

$（document）.ready（（）=>loadServerData（））；//jQuery
函数loadServerData（）{
const TASK=google.script.run.withSuccessHandler（useNames）；//具有`控制台'的隐式失败处理程序`
//计划每隔一段时间运行一次
常数间隔=10*60*1000；//10分钟
setInterval（sheetName=>TASK.shouldRunAsync（sheetName），interval，“name”）；
//也要及时调用。
TASK.shouldRunAsync（“名称”）；
log（新日期（），“设置计划和调用的服务器函数”）；
}
函数useNames（serverValue、userObject）{
log（新日期（），“从服务器获取值”，serverValue）；
//使用返回值做一些事情，例如。
const cbDiv=$（“包含复选框的div的id”）；//jQuery
/**可以在此处添加代码以读取现有复选框数据，以及
使用该选项可在整个加载过程中保持选中/未选中状态*/
cbDiv.innerHTML=serverValue.map（（name，idx）=>`
${idx+1}:${name}
`）；
}

一如既往，请确保您非常熟悉可序列化数据类型和客户机-服务器通信模型：

其他参考文献

---

对于初学者来说，如果只调用一次

loopNamesForSidebars

，您将获得更好的性能。您的scriptlet版本在整体上对其进行了大量调用。还请注意，Scriptlet仅适用于初始

HtmlTemplate

对象的计算-在加载侧边栏时不会动态计算它们。真！执行速度真慢。那么您是说使用scriptlet获取元素是一种不好的做法？感谢您的提示。这意味着您不能在客户端函数中使用在gs服务器中定义的函数

loopNamesForSidebar

。您可以通过

google.script.run

调用它，并在绑定到

google.script.run

调用的成功处理程序中接收结果。绝对建议在初始

HtmlTemplate

/

HtmlOutput

-即仅从

PropertiesService

或

CacheService

中加载静态内容，或者根据输入的

doGet

/

doPost

参数进行简单计算。任何需要API/服务调用的内容都应该异步加载。为什么我一直在每个侧边栏openi上循环这些名称