Question

非常简单，我正试图进入谷歌应用程序脚本，我对javascript非常生疏。我在google工作表中创建了侧边栏，我有两个文档，gs文档和html文档。我试图让按钮在所述侧栏中显示一些文本，按钮调用的功能在.gs文件中。但由于某种原因，它没有运行。在检查控制台时，我得到的错误是未捕获的ReferenceError getData未在HTMLButtonElement.onclick（userCodeAppPanel：1）中定义。请向我解释为什么这不起作用。我花了两天时间试图解决这个问题。

为了简化，我在html文件（getdata（））中有一个方法，它应该在按下按钮时运行。然而，该函数位于code.gs中，我无法弄清楚为什么它不被称为。

html文件：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <style>
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}
</style>
  </head>
  <body>
    Hello, world! 
    <input type="button" value="Close" onclick="google.script.host.close()" />
       <div class="dropdown">
         <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
         </div>
       </div>
       <div class="testButton">

         <button onclick="getData()">Gather Data</button>

       </div>
       <p id="testData"></p>
<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


</script>

  </body>
</html>

code.gs文件

// display the sidebar
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}
var page;
function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('page')
      .setTitle('My custom sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
  page = html;
}

function getData (){

  //var result = SpreadsheetApp.getActiveSpreadsheet().getRange('check in/invoice!A2:E670').getValues();
  //var numRows = result.values ? result.values.length : 0;
  Logger.log('this is running');
  //document.getElementbyId('testData').innerHTML='you have clicked the button';

}

Answer 1

重要的是要了解您的html文件和与之关联的javascript在您的浏览器中运行，而code.gs中的代码在服务器上运行。你不能在你的html文件中包含code.gs。

您可以使用google.script.run

从html调用回服务器

在你的情况下：

google.script.run.getData();

请查看documentation，因为这是此类编程的一个非常重要的基本概念。请记住，调用将是异步的，如果您想对结果执行某些操作或陷阱错误，则需要实现成功和错误处理程序。

为什么我的方法未定义？

1 个答案: