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
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
Any help would be appreciated!
Try this instead.
You could have done just as easily, before the page is served and avoid onload.