如何使用JavaScript從GoogleApps腳本設定標記文本值？-有解無憂

元素如何設定foo并bar為其對應變數設定值？

html:

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script>
    function sendFoo()
    {
      var foo = document.getElementById("foo").value;
      google.script.run.setFoo(foo);
      var bar = google.script.run.getBar();
      document.getElementById("foo").value = '';
      document.getElementById("bar").childNodes[0].textContent = "put variable here..";
    }
  </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>
</body>
</html>

代碼：

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() {
  // Logger.log("getUrl..");

  var url = ScriptApp.getService().getUrl();
  return url;
}


function doGet(e) {
  // Logger.log("doGet..");
  var htmlOutput = HtmlService.createTemplateFromFile('FooBarBaz');
  htmlOutput.url = getUrl();
  return htmlOutput.evaluate();
}

未注釋時服務器端日志顯示foo和bar值。但是，頁面console.log("some text");上定義的函式內似乎沒有輸出。HTML

uj5u.com熱心網友回復：

如果您嘗試獲取 google 腳本函式的回應，則必須使用success handler呼叫它。 google.script.run.getBar()應更新為：

var bar = '';
google.script.run.withSuccessHandler((response)=>{
  bar = response;
  console.log(response); // prints 'baz' on console.
}).getBar();

您可以使用此值分配給 div 或執行一些其他操作。

uj5u.com熱心網友回復：

function sendFoo()
    {
      var foo = document.getElementById("foo").value;
      google.script.run.setFoo(foo);
      google.script.run
      .withSuccessHandler((s) => {
        document.getElementById("bar").innerHTML = s;
      })
      .getBar();
      document.getElementById("foo").value = '';
      document.getElementById("bar").childNodes[0].textContent = "put variable here..";
    }

uj5u.com熱心網友回復：

只需將其作為更完整的答案：

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script>
    var foo = "";
    var bar = "";
    function sendFoo()
    {
      consoleLogger();
      foo = document.getElementById("foo").value;
      google.script.run.setFoo(foo);
      document.getElementById("fooVal").textContent = foo;
      foo = "";
      document.getElementById("foo").value = foo;

      bar = google.script.run
      .withSuccessHandler((success) => {
        document.getElementById("bar").innerHTML = success;
      })
      .getBar();
      document.getElementById("bar").textContent = bar;
      consoleLogger();
    }

    function consoleLogger()
    {
      console.log(foo);
      console.log(bar);
    }
  </script>
</head>

<body>
  foo is:<input type="text" id="foo" />
  <input type="button" value="sendFoo" onclick="sendFoo()" /> <br> <br> <br> <br> <br> <br> <br>
    foo entered: <div id="fooVal"></div>
    bar is:      <div id="bar"></div>
</body>

</html>

做更多的日志記錄，顯示來自服務器端的foo輸入和值。bar

理想情況下，會切換到#查詢選擇器表示法，而不是使用id.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/523075.html

標籤：javascripthtml谷歌应用脚本dom网络应用

上一篇：Terraform在資源塊和資源塊中啟用或禁用引數？

下一篇：斑馬列印機二維碼標簽制作（.prn檔案）基礎簡單快速上手