【スプレッドシート GAS + ウェブアプリ】スクリプトレット記法で宣言した変数の値を変えたい

Question

実現したいこと

スプレッドシート＋Google Apps Script(GAS)で社内報を開発しております。
フロントのhtml内で、ボタンを押してスクリプトレット記法<? 〜 ?>内の変数の値を変更したいのですが、上手く動作しないため、ご存じでしたら教示いただけますと大変助かります。

発生している問題・分からないこと

ボタンを押すたびにスクリプトレット記法内の変数に対してカウントアップができる方法を探しています。
動作としてはソースのfnc003が成功になります。

該当のソースコード

<input type="button" onclick="fnc001()" value="ボタン1"><!-- 実行結果：1がずっと続く -->
<input type="button" onclick="fnc002()" value="ボタン2"><!-- 実行結果：2がずっと続く -->
<input type="button" onclick="fnc003()" value="ボタン3"><!-- 実行結果：成功（1,2,3,4,5...） -->
<?
  output._ = '<input type="button" onclick="fnc002()" value="ボタン4">'; //実行結果：2がずっと続く
?>

<script>
<? 
  let val = 0;

  function countup(){
      val++;
      return val;
  }
?>

function fnc001(){
  <? val++; ?>
  alert(<?= val ?>);
}

function fnc002(){
  alert(<?!= countup(); ?>);
}

let num =0;
function fnc003(){
  num++;
  alert(num);
}
</script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

google.script.runを使用してコード.gs内の関数を呼び出す方法で一応は実現できたのですが、動作速度に難がありました。
スクリプトプロパティを設定するなどもあると思うのですが、可能であれば.htmlファイル内で解決させたいです。

補足

コード.gs内からgoogleスプレッドシートをgetValuesした配列をフロント側で操作している際に必要となった問題ですが、質問はシンプルにさせていただきました。

Answer 1

　スクリプトレット記法での変数や関数はサーバ側に保持されているため、クライアント側では動作しないというのが私の理解です。スクリプトレット記法での変数や関数はレンダリング時に評価され、HTMLの中の文字列になっていると思います。

ただし、テンプレート コードはページがユーザーに配信される前に実行されるため、これらの手法でページに渡せるのは初期コンテンツのみです。ページから Apps Script データにインタラクティブにアクセスするには、代わりに google.script.run API を使用します。
HTML サービス: テンプレート化された HTML  |  Apps Script  |  Google for Developers

　変更できる旨の記述をどこかでご覧になっているようでしたら、そのURLなどをご提示いただいた方が話が早いかもしれません。