Google App 脚本中未调用 onClick 函数答案

【问题标题】：onClick function is not being invoked in Google App scriptsGoogle App 脚本中未调用 onClick 函数
【发布时间】：2020-06-30 20:51:13
【问题描述】：

我正在创建一个脚本，该脚本可以向复选框设置为 true 的选定人员发送电子邮件，并且我正在为其创建自定义侧边栏。我已经成功地制作了脚本。但是侧边栏不起作用我已经尝试了所有方法，例如创建 eventListner 或添加 onClick 事件，但仍然没有调用我的函数我已经签入了它根本没有调用的日志。请问谁能告诉我的代码有什么问题？

这是我的 HTML 文件

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
      <div>
    <div class="form-group">
      <label for="enter-subject">Subject</label>
      <input type="text" class="form-control" id="enter-subject" aria-describedby="emailHelp" placeholder="Enter Subject">
    </div>
    <div class="form-group">
      <label for="enter-message">Message</label>
      <input type="text" class="form-control" id="enter-message" placeholder="Enter Message">
    </div>
    <button class="btn btn-primary" id="mainButton" onClick="afterButtonIsClicked">Submit</button><!-- 
 onClick="afterButtonIsClicked();" -->
  </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script type="text/javascript">
    function afterButtonIsClicked(){
      var subject = document.getElementById("enter-subject")
      var message = document.getElementById("enter-message")
      var rowData = {subject: subject.value, message: message.value}
      console.log(rowData)
      google.script.run.addNewRow(rowData)
    }
    
//    document.getElementById("mainButton").addEventListner("click",afterButtonIsClicked)
    </script>
  </body>
</html>

这是我的脚本文件

function addNewRow(rowData) {
  var sheet = SpreadsheetApp.getActiveSheet();
  var startRow = 2;  
  var dataRange = sheet.getRange(startRow, 1, sheet.getLastColumn(),sheet.getLastColumn());
  var data = dataRange.getValues();
  for (var i = 0; i < data.length; ++i) {
    var row = data[i];
    var checkbox1 =row[1];
    var emailAddress = row[0];
//    var subject = "test subject";     
//    var message = "test message";    
    if(checkbox1) { 
      console.log(`${rowData.subject} ${rowData.message}`)
      MailApp.sendEmail(emailAddress,rowData.subject,rowData.message)
    }
  }
}

这是我的侧边栏文件用户界面

function loadForm() {
  const htmlForSidebar = HtmlService.createTemplateFromFile("index")
  const htmlOutput = htmlForSidebar.evaluate()
  
  const ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput)
}

function createMenu() {
  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu("My Form")
  menu.addItem("Show Form", "loadForm")
  menu.addToUi();
}

function onOpen() {
  createMenu()
}

谁能诊断并告诉我错误？

【问题讨论】：

“边栏不工作”是什么意思？您要解决的具体问题是什么？代码很多，问题有点模糊。
寻求调试帮助的问题应包括minimal reproducible example。
@dimiguel 好的，抱歉，这是我第一次在 StackOverflow 上提问，我不知道问题框架政策，而且我的母语也不是英语，所以有点搞砸了。不过下次我一定会注意的。

标签： javascript html google-apps-script google-sheets

【解决方案1】：

这应该可以解决 onClick 问题：

onClick="afterButtonIsClicked();"

【讨论】：