使用 Google Apps Script HtmlService 类产生一些输出。这个具体案例适用于 Google 表格侧边栏，但我在用作网络应用程序时也会遇到它。
我遇到了一个问题，如果我将我的脚本直接放入 html 文件中，DOM 引用工作正常。一旦我将它们放入 scriptlet 中，它就会抛出错误；
Uncaught TypeError: Cannot read properties of null (reading 'value')
这是 html 表单和脚本：
<body>
<?!= include('LOGO') ?>
<form id="add">
<div><input id=" fName" type="text" /> First Name</div>
<div><input id="lName" type="text" /> Last Name</div>
<div><input id="empId" type="text" /> ID#</div>
<div><input id="job" type="text" /> Job</div>
<div><input id="wage" type="text" /> Wage</div>
<div id="job2" type="text" style="display: none"><input id="jobtwo" type="text" /> Job 2</div>
<div id="wage2" type="text" style="display: none"><input id="wagetwo" type="text" /> Wage 2</div>
<div id="job3" type="text" style="display: none"><input id="jobthree" type="text" /> Job 3</div>
<div id="wage3" type="text" style="display: none"><input id="wagethree" type="text" /> Wage 3</div>
<div>
<button id="enter" type="button" onclick="addRecord()"> Enter</button>
<button id="more" type="button" onclick="moreJobs()"> + Job</button>
<button id="less" type="button" onclick="lessJobs()"> - Job</button>
<button id="close" type="button" onclick="closeSide()"> Close</button>
</div>
</form>
<?!= include("AddEmpJS") ?>
</body>
这是include函数引用的AddEmpJS.html；
<script>
function addRecord() {
let fname = document.getElementById("fName").value
let lname = document.getElementById("lName").value
let empId = document.getElementById("empId").value
let job = document.getElementById("job").value
let wage = document.getElementById("wage").value
let job2 = document.getElementById("jobtwo").value
let wage2 = document.getElementById("wagetwo").value
let job3 = document.getElementById("jobthree").value
let wage3 = document.getElementById("wagethree").value
let record = [
fname, lname, empId, job, wage, job2, wage2, job3, wage3
]
console.log(record)
google.script.run.addEmpRecord(record);
document.getElementById("add").reset()
}
function moreJobs() {
if(document.getElementById("job2").style.display == "none") {
document.getElementById("job2").style.display = "block"
document.getElementById("wage2").style.display = "block"
return "job 2 showing"
}
if(document.getElementById("job3").style.display == "none") {
document.getElementById("job3").style.display = "block"
document.getElementById("wage3").style.display = "block"
return "job 3 showing"
}
}
function lessJobs() {
if(document.getElementById("job3").style.display == "block") {
document.getElementById("job3").style.display = "none"
document.getElementById("wage3").style.display = "none"
return "removing job 3"
}
if(document.getElementById("job2").style.display == "block") {
document.getElementById("job2").style.display = "none"
document.getElementById("wage2").style.display = "none"
return "removing job 2"
}
}
function closeSide() {
google.script.host.close()
}
</script>
以及服务器端的包含功能；
function include(page) { return HtmlService.createHtmlOutputFromFile(page).getContent(); }我想利用 include("page") 函数来保持样式、脚本和 html 的独立性和可读性。我在这里错过了什么？
我认为这与数据的加载和评估方式有关，但不知道如何应用修复程序。
当我将代码拆分到 scriplet 包含函数时，我研究了使用 window.onload 事件处理程序来重新评估代码，但我不知道这是否是使用表单的最佳方法。