未在 Google App 脚本中调用 onClick 函数

Dev*_*dia 8 html javascript google-sheets google-apps-script

我正在创建一个脚本,该脚本可以向选中的人员发送电子邮件,其中复选框设置为 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>
Run Code Online (Sandbox Code Playgroud)

这是我的脚本文件

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)
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

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

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()
}
Run Code Online (Sandbox Code Playgroud)

谁能诊断并告诉我错误?

小智 4

这应该可以解决 onClick 问题:

onClick="afterButtonIsClicked();"
Run Code Online (Sandbox Code Playgroud)