使用Google Script与JavaScript显示活动剩余名额时遇未定义错误求助

问题根源 #

服务端Code.gs中的函数和客户端HTML/JS不在同一执行环境，不能直接同步调用。你之前尝试的google.script.run.updateSpots()是异步操作，不会直接返回结果，必须通过回调函数接收返回值，这才是报错updateSpots is not defined的核心原因。

修改后的完整代码 #

1. Code.gs（优化版）

function updateSpots(){
  const url = "<MY URL>"; // 替换为你的Google表格URL
  const ss = SpreadsheetApp.openByUrl(url);
  const ws = ss.getSheetByName("2022-2023");
  const values = ws.getDataRange().getValues();
  
  // 重点：如果表格第一行是表头（比如"姓名""邮箱"等），要减去1行；无表头则直接用values.length
  const bookedSpots = values.length - 1; 
  return bookedSpots;
}

2. index.html（修复异步调用逻辑）

<div>
  <p id="places"></p>
  <script>
    // 异步调用服务端函数，通过successHandler接收返回值
    google.script.run
      .withSuccessHandler(displayRemainingSpots)
      .updateSpots();

    // 回调函数：处理返回的已预订名额，渲染剩余名额
    function displayRemainingSpots(booked_spots) {
      console.log("已预订名额：", booked_spots);
      const placesEl = document.getElementById("places");
      if (booked_spots < 20) {
        placesEl.innerHTML = `剩余名额：${20 - booked_spots}`;
      } else {
        placesEl.innerHTML = "活动名额已全部满员";
      }
    }
  </script>
</div>

关键注意事项 #

• 表格权限：确保Google表格的共享权限允许脚本访问（比如设置为「任何人可查看」，或脚本运行者拥有表格编辑权限）
• 表头判断：如果你的表格没有表头行，把Code.gs中的values.length -1改成values.length
• 测试验证：可以先在Code.gs中手动运行updateSpots函数，确认能正常返回数值，排除表格访问问题

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