Search code examples
javascripthtmlvariablesgoogle-apps-scripttemplate-engine

How do I set a variable equal to another variable in an Apps Script scriplet?

I just started learning Apps Script. I can't seem to be able to set iAsString to i which was declared inside of the scriptlet for loop. I've made a new html document and narrowed down that when I add the code with iAsString, it stops working.

This is a snippet of it:

<body>
    <? var data = getData(); ?>
    <? var html_data = getHTMLData(); ?>

    <div id='scoreboard'></div>
    
    <script>
      const scoreboard = document.getElementById("scoreboard");
      let html = "<p>My new scoreboard.</p>";
      scoreboard.insertAdjacentHTML("beforeend", html);

      window.onload = function() {
        <? for (var i = 0; i <= +data[0][0]; i++) { ?>
          var iAsString = <? i.toString() ?>;
          var newRound = '<div id="round_'+iAsString+'"></div>';
          scoreboard.insertAdjacentHTML("beforeend", newRound);

          const round = document.getElementById("round_"+iAsString);

          <? for (var j = 0; j <= 200; j++) { ?>
            round.innerHTML += <? html_data[j][i+1] ?>;
          <? } ?>
        <? } ?>
      }

I've tried putting the <? i.toString() ?> in quotes '<? i.toString() ?>', it just doesn't work.

Update: The main code in my main.gs file is

function doGet() {
  return HtmlService.createTemplateFromFile('reprex').evaluate();
}

where reprex.html is the html file

I've remade the code so only the code that doesn't work is included

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id='scoreboard'></div>
    
    <script>
      const scoreboard = document.getElementById("scoreboard");

      window.onload = function() {
        <? for (var i = 0; i <= 2; i++) { ?>
          var iAsString = <? i.toString() ?>;
          var newRound = '<div id="round_'+iAsString+'"></div>';
          scoreboard.insertAdjacentHTML("beforeend", newRound);
        <? } ?>
            }
    </script>
  </body>
</html>

when the code is deployed and I open up script's inspect https://script.google.com/macros/s/AKfycbwtyD0rP5tJlRzsS8S8nkHEJmi6_NS0mv_p_5tMiHag4sHD1nZn_-sddtBx3WLI5z_ngg/exec there are no divs inside of the div called scoreboard nothing added to the scoreboard div

But when I change code inside of insertAdjacentHTML() with random code, it works

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id='scoreboard'></div>
    
    <script>
      const scoreboard = document.getElementById("scoreboard");

      window.onload = function() {
        <? for (var i = 0; i <= 2; i++) { ?>
          scoreboard.insertAdjacentHTML("beforeend", "<p>this works</p>");
        <? } ?>
            }
    </script>
  </body>
</html>

When you open the inspect for it after it's deployed, https://script.google.com/macros/s/AKfycby5A3CV_ejIQmXyS-m5IBagfM_OKlwRPtVvQouyvUBBhLWBsmZH2evYGlGsiXIpNysKWg/exec the code appears inside of the scoreboard div The code appearing inside of the scoreboard div

Any help would be appreciated!

Solution

  • Try this instead.

    <html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id='scoreboard'></div>
    
    <script>
      const scoreboard = document.getElementById("scoreboard");

      window.onload = function() {
        <? for (var i = 0; i <= 2; i++) { ?>
          var newRound = "round_"+<?= i ?>;
          newRound = '<div id="'+newRound+'"><p>'+newRound+'</p></div>';
          scoreboard.insertAdjacentHTML("beforeend", newRound);
        <? } ?>
            }
    </script>
  </body>
</html>

    enter image description here

    You could have done just as easily, before the page is served and avoid onload.

    <html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id='scoreboard'>
    <? for (var i = 0; i <= 2; i++) { ?>
      <div id="round_"+<?= i ?>>
        <p>round_<?= i ?></p>
      </div>
    <? } ?>
    </div>
  </body>
</html>