如何从自定义 HTML 侧边栏中更改 Google 表格单元格中的值？答案

【问题标题】：How to change values in cell of Google Sheet from custom HTML sidebar?如何从自定义 HTML 侧边栏中更改 Google 表格单元格中的值？
【发布时间】：2020-05-03 23:46:18
【问题描述】：

我有一个带有自定义边栏的 Google 电子表格。边栏仅包含带有 <textarea> 的表单。 <textarea> 使用脚本从表格单元格中获取值。我想通过onchange 触发器将新值从侧边栏发送到同一单元格，或者如果用户未更改旧值，则将旧值保留在单元格中。你可以在下面看到我所拥有的。不幸的是，它不起作用。不起作用意味着侧边栏从单元格中获取价值，但在更改后不发送新的。我不明白为什么我错了以及如何解决？

function showSidebar() {
    var html = HtmlService.createHtmlOutputFromFile('Change.html')
        .setTitle('Cooking method')
        .setWidth(300);
    SpreadsheetApp.getUi()
        .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}

<!doctype html>
<html lang="en">
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <meta charset="utf-8">
  <title>change</title>
  <style>
   body{
   background-color: #3366CC;
   } 
   textarea {
   margin: 10px
   }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
      $(function()
      {
         google.script.run
             .withSuccessHandler(updateMethod)
             .getDefaultMethod();
      });
      function updateMethod(method_val)
      {
         document.getElementById('method').innerHTML=method_val;
      }
    </script>
</head>
<body>
  <form id="mysidebar">
    <div class="block form-group">
    <label for="method"></label>
        <textarea id="method" name="method" rows="30" cols="45">
        </textarea>
    </div>   
    </form>
<div></div>
<script>
         $("method").change(function () {
         google.script.run.addNewMethod(this);
         }).change();

</script> 
</body>
</html>

【问题讨论】：

1.可以问一下it does not work的详细信息吗？ 2.your previous question你会怎么做？
不幸的是，它在库中不起作用（我稍后会修复它）。但适用于原生电子表格。现在我明白了我不需要按钮来提交表单。当用户更改侧边栏中的文本时，获得新值会更好。每个电子表格都将包含 Method 表以应用此边栏。
感谢您的回复。关于(I'll fix it later)，我能理解。关于你的这个问题，在这种情况下，GAS脚本和HTML放在容器绑定脚本的一个GAS项目中而不使用库？
很抱歉误解了第一条评论。 1. 这个问题的Does not work 表示<textarea> 从单元格中获取值，但在我更改侧边栏中的文本时不发送新值。 2. 对于我之前的问题 - 不幸的是，它在库中不起作用（我稍后会修复它）。
关于容器绑定脚本。我需要制作太多模板电子表格副本。每个副本也将复制容器绑定脚本。因此，如果我需要修改我的主脚本，我将需要更新每个副本。 1000 多个电子表格会非常复杂

标签： javascript html google-apps-script google-sheets

【解决方案1】：

我相信你的目标和情况如下。

您想将 textarea 的值发送到 Google Apps 脚本的 addNewMethod。
当您更改文本区域并移除焦点时，您希望将其发送到 GAS 端。
在这种情况下，您不使用 Google Apps 脚本库。 GAS 和 HTML 文件放在容器绑定脚本的一个 GAS 项目中。

对于这个，这个修改怎么样？

首先，请检查我对你这个问题的理解是否正确。

修改脚本：

在这种情况下，请按如下方式修改您的 HTML 和 Javascript。在这次修改中，作为一个简单的修改，我没有修改你的 Google Apps Script 端。

从：

$("method").change(function () {
google.script.run.addNewMethod(this);
}).change();

到：

$("#method").change(function () {
  const obj = {method: $("#method").val()};
  google.script.run.addNewMethod(obj);
});

在这种情况下，为了运行google.script.run，请在输入值后从文本区域中移除焦点。

【讨论】：