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

Question

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..?

WebApp Link

App Script Link

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 class="button" id="btn-a" >ButtonA Link from Index.html</button>

    <button class="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

Hello, the script inside the JavaScript.html file should place inside the Index.html file. Then it will work as you expect. — Prasanna Kumar
– Prasanna Kumar, Commented Sep 29, 2022 at 13:49
Something is parsing index.html, and converting <?= TodaysUrl ?> into a url. That thing is not parsing JavaScript.html. — James
– James, Commented Sep 29, 2022 at 13:49
Hi @James , then how to achieve this. I modified my code as TheWized said.. pls help — Prabhu Paul
– Prabhu Paul, Commented Sep 29, 2022 at 17:51

Waxim Corp · Accepted Answer · 2022-10-01 08:24:02Z

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 class="button" id="btn-a" >ButtonA</button>
    <button class="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>

TheWizEd · Accepted Answer · 2022-09-30 12:52:42Z

0

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.

edited Sep 30, 2022 at 12:52

answered Sep 29, 2022 at 14:07

TheWizEd

8,6542 gold badges14 silver badges23 bronze badges

7 Comments

Prabhu Paul Over a year ago

Hi @TheWizEd , I modified my code as you said, but still not getting that variable. Any Idea..?

TheWizEd Over a year ago

Sorry I had a slight typo. change template.TodaysUrl = TodaysUlr; to template.TodaysUrl = TodaysUrl; It works for me.

Prabhu Paul Over a year ago

still not working and this time I got google drive error on ButtonB Pls check webApp and you have also access to App Script file , so pls modify code according to..

TheWizEd Over a year ago

I've added another suggested edit.

Prabhu Paul Over a year ago

I have modified according to your above suggested edit. but it still not working. pls check WebApp link

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related