无法将 HTML 数据传递到 Code.gs 函数

Question

当我点击运行按钮（查看我的 HTML 代码）时，我无法将数据粘贴到工作表中。

当我从编辑器运行 makeRequest 函数时，我收到一个错误 - TypeError: Cannot read property 'startDate' of undefined。

HTML

<div class="block form-group">

        <label for="select">Date Range</label>
        <select id="select">
            <option selected id="default" value="default">None</option>
            <option selected id="today" value="today">Today</option>
            <option selected id="yesterday" value="yesterday">Yesterday</option>
            
        </select>

 <div class="form-group">
 <button id="btn">Run it</button>  
 </div>       
</div>

Javascript。 HTML

<script>

  document.getElementById('btn').addEventListener("click",retrieveFacebookData);
  

  function retrieveFacebookData () {

    var facebookAccountData = {};
    //I will be adding more key value pairs in this object later

    facebookAccountData.startDate = document.getElementById('select').value;
    
    
    google.script.run.makeRequest(facebookAccountData);
    

  }

    
</script>

代码.gs

function makeRequest(facebookAccountData) {
 
  console.log(facebookAccountData.startDate);

  const row = [facebookAccountData.startDate,newDate()];
  SpreadsheetApp.getActiveSheet().appendRow(row);

  }

Answer 1

修改点：

• 来自When I run the makeRequest function from the editor, I get an error - TypeError: Cannot read property 'startDate' of undefined.，在这种情况下，如果你直接用脚本编辑器运行makeRequest，facebookAccountData的参数不会被声明。这样，就会发生这样的错误。在您的脚本中，需要在侧边栏、对话框和 Web 应用程序中运行 Javascript。

• 关于你的 HTML & Javasript 方面，我认为有一个修改点。在您的 Javascript 中，使用了 document.getElementById('btn').addEventListener("click",retrieveFacebookData);。但是<button class="btn">Run it</button>没有ID。

当以上几点反映到你的脚本中时，它变成如下。

修改脚本一：

当你想直接用脚本编辑器运行makeRequest的功能时，下面的修改如何？

function makeRequest(facebookAccountData) {
  facebookAccountData = {startDate: "sample"};

  console.log(facebookAccountData.startDate);
  const row = [facebookAccountData.startDate, "newDate()"];
  SpreadsheetApp.getActiveSheet().appendRow(row);
}

修改脚本2：

当你想用 HTML & Javascript 端运行makeRequest 的功能时，下面的修改如何？

Google Apps 脚本方面：

function openDialog() {
  const html = HtmlService.createHtmlOutputFromFile("index");
  SpreadsheetApp.getUi().showModalDialog(html, "sample");
}

function makeRequest(facebookAccountData) {
  console.log(facebookAccountData.startDate);
  const row = [facebookAccountData.startDate, "newDate()"];
  SpreadsheetApp.getActiveSheet().appendRow(row);
}

HTML & Javascript 端：index.html

<div class="block form-group"> <label for="select">Date Range</label> <select id="select">
<option selected id="default" value="default">None</option>
<option selected id="today" value="today">Today</option>
<option selected id="yesterday" value="yesterday">Yesterday</option>
</select>
  <div class="form-group"> <button id="btn">Run it</button> </div>
</div>
</div>
<script>
  document.getElementById('btn').addEventListener("click",retrieveFacebookData);

  function retrieveFacebookData () {
    var facebookAccountData = {};
    //I will be adding more key value pairs in this object later
    facebookAccountData.startDate = document.getElementById('select').value;
    google.script.run.makeRequest(facebookAccountData);
  }
</script>

• 在这种情况下，请使用脚本编辑器运行openDialog()。这样，就会打开一个对话框并且可以看到 HTML。当您选择它并单击按钮时，makeRequest 将与facebookAccountData 一起运行。这样，该值就会附加到电子表格中。

参考：

• Dialogs and Sidebars in Google Workspace Documents