本文详解如何正确获取 html 页面中动态添加的多个文本域（textarea）值，并结构化传递给 google apps script，最终写入指定工作表，重点修复原始代码中数据结构错位、参数传递错误及调试缺失等关键问题。

本文详解如何正确获取 html 页面中动态添加的多个文本域（textarea）值，并结构化传递给 google apps script，最终写入指定工作表，重点修复原始代码中数据结构错位、参数传递错误及调试缺失等关键问题。

在构建基于 Google Apps Script 的表单类 Web 应用时，一个常见需求是：用户通过前端动态添加选项（如单选题的 A/B/C/D 项），填写题干与各选项内容后，一键提交至 Google Sheets。但原始实现存在严重数据结构不匹配——前端 insertValue() 函数试图将选项数据嵌套进 data[data.length-1].options，而实际 data 数组初始为空；同时后端 enterNameDS() 却按 data.forEach(question => ...) 遍历，却未定义 question.title 和 question.content 字段，导致运行时崩溃。

✅ 正确的数据流向设计

应采用「题干 + 选项数组」的扁平化结构，统一由前端组装后整体传递：

// 前端 insertValue() 修正核心逻辑
function insertValue() {
  const title = qnumberDSInput.value.trim();
  const content = contentDSInput.value.trim();

  const options = [];
  optionsContainer.querySelectorAll('.option').forEach((option, index) => {
    const checkbox = option.querySelector('.checkbox');
    const textarea = option.querySelector('.option-textarea');

    // 关键：为每个选项明确记录 position（列偏移）、value 和是否正确
    options.push({
      position: index + 1, // 对应第1/2/3...个选项 → 后续公式中 column() 比较基准
      value: textarea.value.trim(),
      isCorrect: checkbox.checked ? 'Đ' : 'S'
    });
  });

  // ✅ 一次性传递完整结构体（非空数组！）
  google.script.run.enterNameDS({
    title,
    content,
    options
  });
}

✅ 后端脚本健壮性增强

enterNameDS(data) 必须严格校验输入结构，并启用日志辅助调试（Google Apps Script 中 console.log() 可在执行日志中查看）：

Google Sheet matan

通过 Maton API Gateway 与 Google Sheets 交互，使用 curl 读取、写入、追加和清除电子表格数据。在用户提及相关需求时使用此技能。

下载

function enterNameDS(data) {
  if (!data || typeof data !== 'object') {
    console.error('❌ Invalid data received:', data);
    return;
  }

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const shTitle = ss.getSheetByName('title');
  const sh = ss.getSheetByName('tests');

  if (!shTitle || !sh) {
    console.error('❌ Required sheets "title" or "tests" not found.');
    return;
  }

  let nextRow = Number(shTitle.getRange('E8').getValue()) || 1;

  // ✅ 显式解构，避免 undefined 访问
  const { title = '', content = '', options = [] } = data;

  // 每个选项生成一行（若需单题多行，请调整逻辑）
  options.forEach((opt, idx) => {
    const formulas = [
      title,                          // A列：题号
      `="${content}"`,                 // B列：题干（用公式包裹防注入）
      `=IF(COLUMN()=${opt.position + 2},"${opt.value}","")`, // C列起：选项值（+2因A/B已占两列）
      opt.isCorrect                     // D列：是否正确（Đ/S）
    ];

    console.log(`? Writing row ${nextRow}:`, formulas);
    sh.getRange(nextRow, 1, 1, formulas.length).setFormulas([formulas]);
    nextRow++;
  });

  // ✅ 更新计数器并持久化
  shTitle.getRange('E8').setValue(nextRow);
  console.log(`✅ Updated counter to: ${nextRow}`);
}

⚠️ 关键注意事项与调试建议

• 禁止直接拼接未转义的用户输入到公式中："${opt.value}" 存在公式注入风险。生产环境应使用 Utilities.escapeString() 或改用 .setValue() 写纯文本。
• 动态元素 ID 不可靠：原始代码依赖 checkbox.id.slice(2) 解析序号，但新增选项时 ID 可能重复或错位。推荐改用 index（如上）或 data-index 属性。
• 调试必做三件事：
  1. 在浏览器开发者工具中打开 Console，检查 google.script.run 调用是否报错；
  2. 在 Apps Script 编辑器中点击 执行 > 查看执行日志，确认 console.log() 输出；
  3. 使用 Logger.log() 替代部分 console.log()（兼容性更广）。
• 分离 JS 文件提升可维护性：将前端逻辑移至独立 .js 文件（如 client.js），通过 <script src="client.js"></script> 引入，便于断点调试。

通过以上重构，数据流清晰、结构一致、容错性强，可稳定支撑动态表单向 Google Sheets 的批量写入。