Webページ上のボタン要素を条件付きで非表示/表示できるようにしたい

前提・実現したいこと

初心者のような質問で恐縮です。
Webページ上のボタン要素を条件付きで非表示/表示できるようにしたいですが、良い方法ありますでしょうか。

HTMLでGoogle APP Scriptで取得した結果(status)を受け取り、それを条件にボタン要素を非表示/表示させたいです。（status=Active：ボタン表示、status=Inactive：ボタン非表示）

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?var status = getStatus(); ?> //GASからstatusを取得
  </head>
  <body>
    <button class="btncust btn-white is-default-device" id="buttonid"><img src="/web/resource/img/support.png" height="21px" style="vertical-align: middle;padding-bottom: 3px;" width="20px" />;
　　</button> 
  </body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1const getStatus = (n) => n == 1 ? "Active" : "InActive";
2const doGet = (e) => HtmlService.createTemplateFromFile('index').evaluate();

html
1<!DOCTYPE html>
2<html>
3<head>
4  <base target="_top">
5</head>
6<body>
7
8<button class="btncust btn-white is-default-device" id="buttonid"><img src="/web/resource/img/support.png" height="21px" style="vertical-align: middle;padding-bottom: 3px;" width="20px" />;
9  　　</button>
10</body>
11<script>
12  const status = "<?= getStatus(0); ?>";
13  if(status === "InActive") {
14    document.getElementById('buttonid').style.display = "none";
15  }
16</script>
17</html>