Using Google Apps Script HtmlService class to produce some output. This specific case is for a Google Sheets sidebar, but I'm also running into it when utilizing as a web app.
I'm running into an issue where if I put my script directly into the html file, the DOM references work fine. Once I put them into and <?!= include("page") ?> scriptlet, it throws an error;
> Uncaught TypeError: Cannot read properties of null (reading 'value')
Here is the html form and scriptlet:

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

function addEmp() {
  var page = HtmlService.createTemplateFromFile("AddEmp").evaluate();
  page.setTitle("💼 Add Employee")
  ui.showSidebar(page)

const ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("EMPLOYEES");
const setup = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SETUP");
const summary = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SUMMARY");
const ui = SpreadsheetApp.getUi();
function onOpen(e) {
  ui.createMenu("👔 Employees")
    .addItem("💼 Add Employee", "addEmp")
    .addItem("✨ Edit Employee", "editEmp")
    .addItem("🔥 Del Employee", "delEmp")
    .addToUi();
  ui.createMenu("📋 Departments")
    .addItem("➕ Add Department", "addDept")
    .addItem("🔧 Edit Department", "editDept")
    .addItem("➖ Del Department", "delDept")
    .addToUi();
  ui.createMenu("⌚ Schedule")
    .addItem("📅 Add Week", "addSched")
    .addItem("🔎 Update Summary Tab", "updateTabs")
    .addToUi();    
  updateTabs();
}
function updateTabs() {
  var tabList = SpreadsheetApp.getActiveSpreadsheet().getSheets().map((s) => s.getName())
    .filter((s) => s != "SETUP" && s != "EMPLOYEES" && s != "TEMPLATE" && s != "SUMMARY")
  Logger.log(tabList)
  var rule = SpreadsheetApp.newDataValidation().requireValueInList(tabList)
  var dropDown = summary.getRange("A1").setDataValidation(rule).activate();
}
function include(page) {
    return HtmlService.createHtmlOutputFromFile(page).getContent();
}
//ADD EDIT & REMOVE EMPLOYEE HTML 
function addEmp() {
  var page = HtmlService.createTemplateFromFile("AddEmp").evaluate();
  page.setTitle("💼 Add Employee")
  ui.showSidebar(page)
}
function editEmp() {
  var page = HtmlService.createHtmlOutputFromFile("EditEmp")
    .setTitle("✨ Edit Employee");
  ui.showSidebar(page)
}
function delEmp() {
  var page = HtmlService.createHtmlOutputFromFile("DelEmp")
    .setTitle("🔥 Delete Employee");
  ui.showSidebar(page)
}
//checks for an id# and job code
// if id# already exist, err to checkId
// if job doesn't exist, eff to checkJob
function addEmpRecord(record) {
  let array
<details>
<summary>英文:</summary>
Using Google Apps Script HtmlService class to produce some output. This specific case is for a Google Sheets sidebar, but I&#39;m also running into it when utilizing as a web app.
I&#39;m running into an issue where if I put my script directly into the html file, the DOM references work fine. Once I put them into and &lt;?!= include(&quot;page&quot;) ?&gt; scriptlet, it throws an error;
&gt; Uncaught TypeError: Cannot read properties of null (reading &#39;value&#39;)
Here is the html form and scriptlet:

This is the AddEmpJS.html referenced by the include function;

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

The include function on the server side,
`function include(page) {
    return HtmlService.createHtmlOutputFromFile(page).getContent();
}`
The UI that calls the sidebar,

and the whole script,

I'd like to utilize the include("page") function to keep the style, script, and html separate and readable.  What am I missing here?
I think it has something to do with how the data is loaded and evaluated, but don't see how to apply a fix.
When I split apart the code over to the scriplet include function, I looked into using a window.onload eventhandler to re-evaluate the code, but I don't know if that is the best approach with a form.
</details>
# 答案1
**得分**: 0
我相信你的目标如下。
- 你想要解决当前的问题`Uncaught TypeError: Cannot read properties of null (reading 'value')`。
当我看到你的脚本时，在HTML的顶部，使用了`&lt;div&gt;&lt;input id=&quot; fName&quot; type=&quot;text&quot; /&gt; First Name&lt;/div&gt;`。在这种情况下，`id`是`&quot; fName&quot;`。但是，在你的Javascript中，使用了`let fname = document.getElementById(&quot;fName&quot;).value`。
我认为你当前的问题`Uncaught TypeError: Cannot read properties of null (reading 'value')`的原因是这个。所以，请按照以下方式进行修改。
### 从：
	&lt;div&gt;&lt;input id=&quot; fName&quot; type=&quot;text&quot; /&gt; First Name&lt;/div&gt;
### 到：
	&lt;div&gt;&lt;input id=&quot;fName&quot; type=&quot;text&quot; /&gt; First Name&lt;/div&gt;
<details>
<summary>英文:</summary>
I believe your goal is as follows.
- You want to remove your current issue of `Uncaught TypeError: Cannot read properties of null (reading &#39;value&#39;)`.
When I saw your script, at the top HTML, `&lt;div&gt;&lt;input id=&quot; fName&quot; type=&quot;text&quot; /&gt; First Name&lt;/div&gt;` is used. In this case, `id` is `&quot; fName&quot;`. But, in your Javascript, `let fname = document.getElementById(&quot;fName&quot;).value` is used.
I think that the reason for your current issue of `Uncaught TypeError: Cannot read properties of null (reading &#39;value&#39;)` is due to this. So, please modify as follows.
### From:
	&lt;div&gt;&lt;input id=&quot; fName&quot; type=&quot;text&quot; /&gt; First Name&lt;/div&gt;
### To:
	&lt;div&gt;&lt;input id=&quot;fName&quot; type=&quot;text&quot; /&gt; First Name&lt;/div&gt;
</details>