代码之家 › 专栏 › 技术社区 › Chris

谷歌应用程序脚本侧栏-如何设置onclick?

google-apps-script jquery javascript

Chris · 技术社区 · 8 年前

单击Select Template项时,我正在尝试在HTML文件中运行函数。我试过两种不同的方法,但似乎都不管用。我用onclick=“google.script.run.selectTemplate”运行它,但我想先运行本地函数。

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
    <div class="content">
      <div class="card mb-4 box-shadow">
        <div class="card-body">
          <h5 class="card-title">Welcome!</h5>
          <p class="card-text">Please select the template that you'd like to fill with form responses!</p>
          <div class="list-group mb-4">
            <div id="select-template" onclick="runSelectTemplate();" class="list-group-item list-group-item-action">Select Template 
              <i class="fas fa-circle-notch fa-spin float-right" style="font-size:24px"></i>
            </div>
          </div>
          <button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>
        </div>
      </div>
    </div>

    <script>
      $(function() {
        log("Setting up sidebar clicking...");
        $('#select-template').click(runSelectTemplate);
      });

      function runSelectTemplate(){
        log("Select Template clicked... run selectTemplate()");
        //Do stuff here first, then;
        google.script.run.selectTemplate(); //success: change icon to green -> enable getstarted button  //error: icon to X then back to file
      }
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>

更新: 我尝试将select template元素更新为button,但它也不起作用。。。这个 <script> 部分似乎根本没有运行。

<button type="button" id="select-template" class="btn btn-med btn-block btn-outline-primary mt-4 mb-4">1. Select Template
    <i class="far fa-file-alt float-right" style="font-size:24px"></i>
</button>
<button type="button" id="get-started" class="btn btn-lg btn-block btn-primary" disabled>Get Started</button>

1 回复 | 直到 8 年前

Chris 8 年前

看来我犯了个愚蠢的错误。。。我的jQuery脚本标记位于Body标记的底部,因此没有立即加载。

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"</script>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>