如何正确引用对应HTML文档的按钮ID解决document未定义错误？

开发者阿泽

2026-8-9

解决方案

核心问题说明

你遇到的ReferenceError: document is not defined，本质是因为MyFunction01写在了Google Apps Script的服务器端脚本文件（.gs）里——服务器端代码运行在Google的服务器环境中，不存在浏览器的document DOM对象，自然无法获取页面元素。而你的按钮在sidebar.html这个客户端HTML文件里，必须在客户端浏览器环境中操作它。

正确实现方式

将MyFunction01移到sidebar.html文件中，作为客户端JavaScript代码
服务器端的MyFunction02仍保留在.gs文件中，用于处理后端逻辑

示例代码：

sidebar.html 文件内容：

<!-- 你的按钮元素 -->
<button id="button" class="button is-dark">点击执行</button>

<!-- 客户端脚本 -->
<script>
function MyFunction01() {
  const button = document.getElementById("button");
  button.className = "button is-primary is-loading";
  google.script.run.withSuccessHandler(e => {
    console.log(e);
    button.className = "button is-dark";
  }).MyFunction02();
}

// 页面加载后给按钮绑定点击事件
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('button').addEventListener('click', MyFunction01);
});
</script>

服务器端 .gs 文件内容：

function MyFunction02() {
  // 这里写你的后端逻辑，比如处理数据、调用服务等
  return "操作完成"; // 返回给客户端的成功回调数据
}

// 用于加载侧边栏的函数（如果之前没有的话）
function showSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('sidebar');
  SpreadsheetApp.getUi().showSidebar(html);
}