ステータスをJavaScript関数でHTMLに表示し続ける方法

bugfix> javascript > 投稿

これは前の続きです質問 私はこのフォーラムで作りました。

else条件を追加して、コードにいくつかの変更を加えました。私が解決しようとしているのは、ページが読み込まれるときに現在のステータスを表示することです。現在のコードは、ボタンがクリックされた場合にのみステータスを表示します。

ページが読み込まれるときに現在のステータスが表示され、ボタンがクリックされるとステータスが更新されるようにするにはどうすればよいですか。

CODE.GS

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index');
}
function checkStatus(notify) { 
  var employee = "John Peter";
  var ss = SpreadsheetApp.getActiveSpreadsheet();        
  var mainSheet = ss.getSheetByName("MAIN");
  var data = mainSheet.getDataRange().getValues();
  
  for (var j = 0; j < data.length; j++){
    var row = data[j];
    var mainSheet2 = row[4];
    var mainSheet3 = row[0];
    var status = (mainSheet2 =="IN" && mainSheet3 == employee) ; 
    if (status == true){
      var notify = employee +" You Are In"
      return notify;
      }
    else{
     var status = (mainSheet2 =="OUT" && mainSheet3 == employee) ; 
    if (status == true){
      var notify2 = employee +" You Are Out"
      return notify2;
  }
}
  }
}

Index.html

<body>
    <div>
      <button onclick="onStatus()">Check Status</button>
      <font color='Green' id="status" onbeforeprint="onStatus" ></font>
      </div>
      
    
    <script>
      function onStatus() {
        google.script.run.withSuccessHandler(updateStatus) // Send the backend result to updateStatus()
          .checkStatus(); // Call the backend function
      }
      function updateStatus(notify) {
        document.getElementById('status').innerHTML= notify;
      }
      
     
      
    </script>
  </body>

javascript

html

google-apps-script

回答 1 件

  • この関数は、以下のようにページの読み込み時に呼び出すことができます。このスクリプトは、bodyタグが終了する直前の最後に追加します。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
    // The code in this function runs when the page is loaded.
    $(function() {
     google.script.run.withSuccessHandler(updateStatus)
              .checkStatus(); 
    });
</script>

あなたの答え

関連記事