如何用Google Apps Script与JavaScript设置<div>文本及解决相关问题

1. 结合Google Apps Script与JavaScript设置

标签文本值 #

核心是通过DOM操作获取目标<div>元素，修改其textContent（纯文本）或innerHTML（支持HTML）属性。如果需要从Google Apps Script后端获取数据，需注意google.script.run是异步操作，必须通过回调函数处理返回结果，不能直接同步赋值。

2. 修正现有代码中foo、bar元素的变量赋值问题 #

你的代码存在两个关键问题：

• google.script.run.getBar()是异步调用，无法直接用变量接收返回值，必须通过withSuccessHandler指定回调函数处理后端返回结果
• 原HTML中<div id="bar">未闭合，会导致DOM结构异常，影响节点选中

修正后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    function sendFoo() {
      // 获取foo输入框的值并提交到后端
      const fooValue = document.getElementById("foo").value;
      google.script.run.setFoo(fooValue);
      
      // 异步调用后端getBar接口，用回调处理返回值
      google.script.run.withSuccessHandler(function(barValue) {
        // 清空foo输入框
        document.getElementById("foo").value = '';
        // 设置bar的第一个子节点文本为后端返回的变量值
        document.getElementById("bar").childNodes[0].textContent = barValue;
        // 测试console.log，现在可在浏览器控制台查看
        console.log("bar已更新为:", barValue);
      }).getBar();
    }
  </script>
</head>
<body>
  foo is:<input type="text" id="foo" />
  <input type="button" value="sendFoo" onclick="sendFoo()" /> <br> <br> <br>
  bar is:  
  <div id="bar">Change only me<div>but not me</div></div>
</body>
</html>

修正说明 #

• 用withSuccessHandler接收getBar()的异步返回值，确保请求完成后再更新DOM
• 补全<div id="bar">的闭合标签，修复DOM结构错误
• 明确变量命名（如fooValue）提升代码可读性

3. 解决HTML页面中console.log无输出的问题 #

console.log的输出不会显示在Google Apps Script的服务器日志中，需打开浏览器开发者工具（按F12或Ctrl+Shift+I），切换到Console标签页查看输出。

另外，原代码中google.script.run.getBar()的同步写法会导致console.log可能在异步请求完成前执行，修正后的代码将console.log放在回调函数内，确保能正确输出变量值。

可选：启用后端日志验证 #

如果需要在后端验证foo和bar的传递情况，取消setFoo和getBar里的日志注释即可：

const SPREADSHEET_ID = "1L3Sd-J780mQtb7JYsmJzInI1kMdrQA8GbLspQJ5eVW4";
const SPREADSHEET_NAME = "data";

function setFoo(foo) {
  Logger.log("setFoo..");
  Logger.log(foo);
}

function getBar() {
  Logger.log("getBar..");
  return "baz";
}

function getUrl() {
  const url = ScriptApp.getService().getUrl();
  return url;
}

function doGet(e) {
  const htmlOutput = HtmlService.createTemplateFromFile('FooBarBaz');
  htmlOutput.url = getUrl();
  return htmlOutput.evaluate();
}

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