Variables for Button onClick not passing from Code.gs to JavaScript.html-CodePudding

i have a simple WebApp.

I wrote script in another file ( not directly in Index.html)

I set onClick attribute to ButtonA from Index.html successfully.

and tried to set another onClick attribute to ButtonB from JavaScript.html file . But it's not working :(

What went wrong or how to achieve this..?

Below is the Code.gs file

function doGet() {
  var template = HtmlService.createTemplateFromFile('Index.html') ;
  var TodaysUrl = "https://google.com" ;
  template.TodaysUrl = TodaysUrl;
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

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

Below is the Index.html file

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

    <style>
      .button {
        display : block ;
        text-align : center ;
        margin : 25px auto ;
        padding : 10px
      }
    </style>
  </head>

  <body>
      
    <button  id="btn-a" >ButtonA Link from Index.html</button>

    <button  id="btn-b" >ButtonB Link from JavaScript.html</button>

    <script>

      document.getElementById("btn-a").onclick = function () { window.open("<?= TodaysUrl ?>" )} ;

    </script>  

    <?!= include('JavaScript'); ?>

  </body>
</html>

Below is the JavaScript.html file

<script>

      document.getElementById("btn-b").onclick = function () { window.open("<?= TodaysUrl ?>" )} ;

</script>

Thanks in Advance

CodePudding user response：

You need to pass TodaysUrl to the template.

function doGet() {
  var TodaysUrl = "https://google.com" ;
  var template = HtmlService.createTemplateFromFile('Index') ;
  template.TodaysUrl = TodaysUrl;
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Include your script in the body of the html rather than from another file.

CodePudding user response：

Your second button is not working because loaded in second time, and is not rendered by the "evaluate" function.

doGet > evaluate (define btnA) > includes JS file (which contains btnB, so won't render)

My suggestion would be to initialize your buttons with a custom function called after the DOM is loaded. Here an example with 2 differents URLs

Code.gs

function doGet() {
  var template = HtmlService.createTemplateFromFile('Index.html') ;
  // var TodaysUrl = "https://google.com" ;
  // template.TodaysUrl = TodaysUrl;
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

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

function initialize() {

  var obj = {};

  obj.url_a = "http://google.com";
  obj.url_b = "http://amazon.com";

  return obj;

}

Index.html

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

    <style>
      .button {
        display : block ;
        text-align : center ;
        margin : 25px auto ;
        padding : 10px
      }
    </style>
  </head>

  <body>
      
    <button  id="btn-a" >ButtonA</button>
    <button  id="btn-b" >ButtonB</button>

    <?!= include('JavaScript'); ?>

  </body>
</html>

Javascript.html

<script>

  document.addEventListener("DOMContentLoaded", function() {
    google.script.run.withSuccessHandler(return_initialize).initialize();
  });

  function return_initialize(obj) {
    document.getElementById("btn-a").onclick = function () { window.open(obj.url_a)} ;
    document.getElementById("btn-b").onclick = function () { window.open(obj.url_b)} ;
  }

</script>