Google Apps Script - Javascript not working

2020-05-09 18:00发布

站内问答 / 前沿技术
606 2 5

I created a simple web app, and it is not working.

Code.gs:

function doGet() {//I think this works
  var output = HtmlService.createTemplateFromFile('index').evaluate();
  output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  output.setTitle('email button');
  return output;
}

function getContent(filename) {//might work
  Logger.log('getContent()');  
  return HtmlService.createTemplateFromFile('javascriptCode').getRawContent();
}

index.html:

<!DOCTYPE html>
<html>
  <body>
    <form id="email_subscribe">
      <input type="email" name="email" id="email" placeholder="Enter your email">
      <input type="button" id="submitButton" value="Submit">
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
    <?!= getContent("javascript") ?>

  </body>
</html>

javascriptCode.html:

<script type="text/javascript">
  $(document).ready(function() {
    $("#submitButton").onclick(function() {
      alert('thx for submitting');
    });
  });
</script>

When I run this webApp, the email and button fields load properly, and the logger logs 'getContent()'. However, nothing happens when I click the button. What am I doing wrong?

Thanks

2条回答
孤傲高冷的网名
2楼-- · 2020-05-09 18:42

There are quite few errors in your code.

  1. Script tag is not a self closing tag.
  2. It is safer to serve https version of jquery, sometime http content will be blocked.
  3. There is NO onclick event in jquery it is just click.

code.gs

function doGet() {
  var output = HtmlService.createTemplateFromFile('index').evaluate();
  output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  output.setTitle('email button');
  return output;
}

function getContent(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <form id="email_subscribe">
      <input type="email" name="email" id="email" placeholder="Enter your email">
      <input type="button" id="submitButton" value="Submit">
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <?!= getContent("javascriptCode") ?>

  </body>
</html>

javascriptCode.html

<script type="text/javascript">
  $(document).ready(function() {
    $("#submitButton").click(function() {
      alert('thx for submitting');
    });
  });
</script>
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2020-05-09 18:49

A Simple HTML dialog example

I usually test these things as a dialog to get them working. It's works as a dialog and I've also included the doGet. I hope this helps. I didn't go exactly as you were going but I think this will help you move that way.

Code.gs:

function doGet() 
{
  var output = HtmlService.createTemplateFromFile('webappdoesnotwork');
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function getEmail(email) 
{
  Logger.log(email);
  return true;
}

function showDialog()
{
  var output = HtmlService.createHtmlOutputFromFile('webappdoesnotwork');
  SpreadsheetApp.getUi().showModelessDialog(output, 'My WebApp');
}

webappdoesnotwork.html

<!DOCTYPE html>
    <html>
      <head>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script>
      function getEmail()
      {
        var email=$('#email').val();
        google.script.run
          .withSuccessHandler(sayThanks)
          .getEmail(email);
      }
      function sayThanks()
      {
        $('#saythanks').css('display','block');
        $('#controls').css('display','none');
      }
      console.log('My Code');
    </script>
      </head>
      <body>
        <div id="saythanks" style="display:none">Hey Thanks for Responding</div>
        <div id="controls">
          <input type="text" id="email" size="35" placeholder="Enter your email"/>
          <input type="button" id="submitButton" value="Submit" onClick="getEmail();"/>
        </div>
      </body>
    </html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)