时间戳

首页 > 解决方案 > 使用 getElementById 从 Google Sheet 中的 ModalDialog 获取值返回 null。我能做些什么？

html - 使用 getElementById 从 Google Sheet 中的 ModalDialog 获取值返回 null。我能做些什么？

问题描述

我正在尝试从模态对话框中进行选择，以便将所选值粘贴到 Google 表格中，但我得到一个空值

首先，我使用 GoogleSheets 中的按钮执行 ModalDialog，然后从下拉列表中选择一个选项。最后，我得到一个空单元格。

我有以下 .gs 代码：

//Showing the ModalDialog in Sheets
    var html = HtmlService.createHtmlOutputFromFile('Netsuite_menu')
          .setWidth(300)
          .setHeight(50);
      SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
          .showModalDialog(html, 'Select a pay method');
selection();

然后在一个单独的 .gs 文件中

//Getting value from html selection
function selection(sel){
   var ss = SpreadsheetApp.getActiveSpreadsheet();
   var mainSheet = ss.getSheetByName("selection_");
mainSheet.appendRow([sel,1]); //It just paste the '1'
}

这是 Netsuite_menu.html 文件

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>
     .button {
       background-color: indigo;
       color: white;
       padding: 2px;
       border: none;
       border-radius: 3px;
     }
   </style>
   <script>
        function runIt(){
        var sel = document.getElementById("tipo").value;
        google.script.run.selection(sel);
      }
  </script>
  <body>
    <form id="form">
    <select id="tipo" name="selection" onchange="runIt()">
      <option value="default" disabled selected>-- Select a pay method--</option>
      <option value="driversA">Op. 1</option>
      <option value="driversB">Op. 2</option>
      <option value="business">Op. 3</option>
      <option value="pay">Op. 3</option>
      <option value="pex">Op. 4</option>
    </select>

    <button
    id="btn"
    class="button" 
    value="Accept" 
    name="LoginButton"
    onclick="google.script.host.close();">
    Accept
    </button>
    </form>
  </body>
</html>

Chrome 控制台中显示的此错误可能有助于了解具体错误： 在此处输入图像描述

标签： htmlgoogle-apps-scriptgoogle-sheets

解决方案

我相信你的目标如下。

  • 您希望在单击接受按钮时附加下拉列表中选定选项的值。

在这种情况下，如何进行以下修改？

修改后的脚本：

在此修改中，您的 HTML 端被修改。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>
     .button {
       background-color: indigo;
       color: white;
       padding: 2px;
       border: none;
       border-radius: 3px;
     }
   </style>
   <script>
      function runIt(){
        var sel = document.getElementById("tipo").value;
        console.log(sel)
        google.script.run.withSuccessHandler(_ => google.script.host.close()).selection(sel);
      }
  </script>
  <body>
    <form id="form">
    <select id="tipo" name="selection">
      <option value="default" disabled selected>-- Select a pay method--</option>
      <option value="driversA">Op. 1</option>
      <option value="driversB">Op. 2</option>
      <option value="business">Op. 3</option>
      <option value="pay">Op. 3</option>
      <option value="pex">Op. 4</option>
    </select>

    <button
    id="btn"
    class="button" 
    value="Accept" 
    name="LoginButton"
    onclick="runIt()">
    Accept
    </button>
    </form>
  </body>
</html>
  • 如果您不想在单击接受按钮时关闭对话框，请修改google.script.run.withSuccessHandler(_ => google.script.host.close()).selection(sel);为google.script.run.selection(sel);.

参考：

推荐阅读