使用Javascript循环HTML元素时获取名称和链接值
我正在为侧边栏的电子表格制作一个web应用程序。
尝试处理实现以下条件的事件侦听器：
当选中复选框(具有对应名称和日历链接)时，
2 dates
- ，然后单击
按钮
完成所有操作后，从后端调用一个函数，该函数获取该名称的事件并将其记录到工作表中。
在循环中，我无法获取姓名和日历的值。不知道怎样才是最好的表达方式。我试着用不同的方式处理它--没有成功。
我最终将所有问题缩小到这两个部分：
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>loopNamesForSidebar()是一个后端函数，它循环显示转到侧边栏的名称和日历。每次我打开侧边栏时，这些数据都会刷新。我没有在我的前端部分使用它。
下面是一个html文件中的Javascript代码：
//import jobs from calendars to sheet
function importJobs() {
//getting all checkboxes
var allCheckboxes = document.getElementsByClassName("check")
//getting inputs of start and end dates
var startDate = document.getElementById("startDate").value
var endDate = document.getElementById("endDate").value
var chosenNames = []
var calendars = []
//looping all checkboxes
for (var i = 0; i < allCheckboxes.length; i++) {
//getting value of each checkbox
var checkbox = allCheckboxes[i].checked;
//if checkbox is checked
if (checkbox == true) {
//getting correspondant employee name
var name = loopNamesForSidebar().names[i]
//and push it to an array
chosenNames.push(name)
//getting correspondant employee calendar
var cal = loopNamesForSidebar().calendars[i]
calendars.push(cal)
} else {
continue;
}
};
//push names and cals to object
var employees = {
names: chosenNames,
cals: calendars
}
//call function to get calendar events
google.script.run.getEvents(employees, startDate, endDate)
};回答 1
Stack Overflow用户
发布于 2019-03-27 07:43:08
对于每个Best Practices，您应该异步加载任何API / ___服务调用输出。我只会将模板评估用于简单的计算/检索数据，例如来自PropertiesService、CacheService、静态定义或基于输入参数的简单查找(即doGet和doPost触发器函数的查询字符串/有效负载数据)。如果平均耗时超过四分之一秒，那么同步使用就太慢了。
所以：
function templateOK(param) {
const val = PropertiesService.getScriptProperties().getProperty(param);
return val ? JSON.parse(val) : [
"name 1", "name 2", "name 3"
];
}
function shouldRunAsync(param) {
const sheet = param ? SpreadsheetApp.getActive().getSheetByName(param) : null;
return sheet ? sheet.getDataRange().getValues() : [];
}假设您已经适当地设置了GS和HTML文件的其他部分，则.html的<script>标记之一可能如下所示：
$(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("");
}一如既往，确保您非常熟悉可序列化的数据类型和客户机-服务器通信模型：https://developers.google.com/apps-script/guides/html/communication
其他参考文献
https://stackoverflow.com/questions/55365365
复制相似问题
腾讯云开发者
