Google Apps Script中JavaScript无法访问HTML元素的问题排查

核心错误分析 #

1. script标签语法错误：带src属性的<script>标签不能内嵌自定义代码，必须拆分单独编写。
2. 服务器端非法操作DOM：Google Apps Script的.gs文件运行在服务器环境，无法访问浏览器的document对象，原userClicked函数中的DOM操作完全无效。
3. DOM加载时机问题：脚本可能在页面元素加载完成前执行，导致getElementById无法找到目标元素，触发undefined报错。

修复后的完整代码 #

1. HTML文件（page.html） #

整合样式与脚本，确保DOM加载完成后执行逻辑：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    .form-row {
       margin-bottom:12px;
       text-align:center;
    }

    .sHDR {
       font-size: 28px;
       text-align:center;
    }
    .owner {
       font-size: 18px;
       border-bottom:solid;
    }
    .addr {
       font-size: 18px;
       text-align:center;
    }
    .nNote {
      text-align:center;
    }
  </style>
</head>
<body>
  <h1>Hello</h1>
  <label>Name: </label><input type="text" id="username">
  <button id="btn">Run It!</button>    

  <!-- 单独拆分脚本标签，放在body末尾确保DOM已加载 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    // 等待DOM完全加载后绑定事件
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById("btn").addEventListener("click", doStuff);
    });

    function doStuff() {
      const usernameInput = document.getElementById("username");
      // 提前判断元素是否存在，避免报错
      if (!usernameInput) return;

      let userInfo = {};
      userInfo.uName = usernameInput.value;   
      google.script.run.userClicked(userInfo);
      // 前端完成输入框清空操作
      usernameInput.value = "";
    }
  </script>
</body>
</html>

2. code.gs文件 #

移除无效DOM操作，正确处理前端传入的参数：

function doGet (){
  return HtmlService.createHtmlOutputFromFile("page");
}

function userClicked(userData) {
  // 日志打印用户输入数据
  Logger.log(`用户输入名称：${userData.uName}，点击了按钮`);
  // 此处可添加存入Google表格的逻辑，示例：
  // const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  // sheet.appendRow([userData.uName]);
}

扩展说明 #

如果需要支持多输入框（如firstname、lastname、address），只需在HTML中添加对应ID的输入框，然后在doStuff函数中扩展userInfo对象即可：

userInfo.firstName = document.getElementById("fn").value;
userInfo.lastName = document.getElementById("ln").value;
userInfo.address = document.getElementById("add").value;

内容的提问来源于stack exchange，提问作者RonJohnx11