谷歌应用程序脚本的新功能'的HTML服务

New to Google Apps Script's HTML service

本文关键字：HTML 服务 新功能 应用程序 脚本 谷歌      更新时间：2023-09-26

我刚刚开始使用GoogleAppsScript的HTML服务来创建UI。一开始很基本，谷歌的文档似乎很不完整（如果我遗漏了什么，请告诉我）。我举了这个例子：https://developers.google.com/apps-script/guides/html/reference/run#withUserObject（对象）并使其工作，但我不明白"this"（在HTML代码中）是从哪里来的，也不明白操作顺序是如何工作的。

为了让我的思想围绕这一点，我正在尝试制作一些东西，我可以在其中输入文本，按下按钮，它将以所有大写字母显示相同的文本。到目前为止，我得到的是：

谷歌脚本：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function capitalize(input){
        return input.toUpperCase();
      }
    </script>
  </head>
  <body>
    Put some text here: <input type="text" name="words"><br>
    <input name="button" type="button" value="CAPITALIZE" onclick="google.script.run
          .withSuccessHandler(capitalize)
          .withUserObject(words)"><br><br>
    Here is your text:
  </body>
</html>

非常感谢您的帮助！

.gs的文档实际上非常好。不过，不要进入任何语言的文档，期望对每个用例都有"完整的解释"。

只有当您想将数据传递给服务器端.gs函数时才需要google.script.run（如链接到的页面顶部所述）。

不过，您所要求的似乎都是客户端操作，不需要将数据传递给.gs函数。

试试这些调整：

// get value of a text box and set it into html of a <span> element
function capitalize(){
  document.getElementById('userInput').innerHTML = 
  document.getElementById("words").value.toUpperCase();
}
onclick="capitalize()"><br><br>
Here is your text:<span id="userInput"></span>
相关文章：