如何更新 HTML 中通過 Google 腳本從 Google 表格中提取變量的文本

Question

我嘗試了各種方法並確認每個 function 都有效，但我無法讓 Google Scripts 和 HTML 相互交談。 My.gs 文件從 url 參數（類似於 vlookup）中查找 accountid，然后吐出由查找值標識的列的值。 如果我找不到 accountid，我會將“剩余學分”和“學分總數”的值都保留為默認值 10。 處理 .gs 文件后，我想讓它自動拉入我的 HTML 文件以標記 creditsremaining 和 credtistotal 變量。 這將依次填充文本並使條形圖計算寬度。

關於如何正確傳遞變量的任何想法？

.gs

function credsearch(searchid) {
   try {
  //  var searchid = "456"
  var tosearch = searchid
   var s = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();     

 var data = SpreadsheetApp.openById("1Okxy3sUkPrKy1wBRs5yw8AAv4qHH3ldOfsA3usziVDo").getSheetByName("Sheet1").getRange('A2:Z').getValues()
 var spreadsheet = SpreadsheetApp.getActive();
  var tf = spreadsheet.createTextFinder(tosearch);
  var all = tf.findAll();
  for (var i = 0; i < all.length; i++) {
    var searchvalue = ('%s', all[i].getA1Notation());
  }
 
 var searchValue = s.getRange(searchvalue).getValue();
 var dataList = data.map(x => x[0])
 var index = dataList.indexOf(searchValue);

 if (index === -1) {

    var creditsremaining = "10"
    var creditstotal = "10"

    console.log(creditsremaining)
    console.log(creditstotal)
    return { creditsremaining: creditsremaining, creditstotal: creditstotal };

 } else {

    var creditsremaining = data[index][1]
    var creditstotal = data[index][2]

    console.log(creditsremaining)
    console.log(creditstotal)
    return { creditsremaining: creditsremaining, creditstotal: creditstotal };
 }
}catch(e) {
  alert(e)
 }
 return { creditsremaining: "Null", creditstotal: "Null" };
}

.HTML

<style>
.grid .bar {
    background-color: #301c4a;
    margin-bottom: 10px;
    align-self: flex-end;
    border-radius: 10px;
    position: relative;
    text-align: left;
}
#speciallicenses .grid.horizontal {
    flex-direction: column;
    border-bottom: none;
    background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(0,0,0,0) 20%);
}
      
.grid.horizontal {
    flex-direction: column;
    border-bottom: none;
    background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(0,0,0,0) 20%);
    border-radius: 10px;
}
.grid.horizontal .bar {
    height: 45px;
    width: var(--bar-value);
    align-self: flex-start;
    margin: auto 0 auto 0;
    border-radius: 10px;
}
.grid.horizontal .bar::after {
    top: initial;
    left: 100%;
    padding: 0 10px;
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    transform: rotate(0deg);
    line-height: 45px;
}
</style>
<div class="grid horizontal" style="background-color:#eeeeee"> 
<div id="creditsbar" class="bar" style="vertical-align:center;width:50%;margin-bottom:0px;padding-top:10px;padding-left:10px;padding-bottom:0px;color:#ffffff"> 
<span id="creditsremaining"></span>/<span id="creditstotal"></span>
</div> </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
google.script.url.getLocation(function(location) {
         accountid = location.parameters["accountid"]
         console.log(location.parameters);
         console.log(location.hash);
        });
 $(document).ready(function () {
function searchforcredits() {
var searchid = accountid
google.script.run.withSuccessHandler(updateCredits).credsearch(searchid);
}
function updateCredits(result) {
var creditsremaining = result.creditsremaining;
var creditstotal = result.creditstotal;

}  
 
  $('span#creditsremaining').text(creditsremaining);
  $('span#creditstotal').text(creditstotal);
  var barwidth = (creditsremaining/creditstotal) *100;
  var barpercent = barwidth + '%';
   $('#creditsbar').css("width", barpercent);
});
</script>

Answer 1

你可以簡單地這樣做。

$(document).ready(function () {
  google.script.run.withSuccessHandler(updateCredits).credsearch(accountid);
}