如何更新 HTML 中通过 Google 脚本从 Google 表格中提取变量的文本

Question

I've tried various methods and confirmed each function works, but I can't get Google Scripts and the HTML to talk to each other. My.gs file looks for the accountid from a url parameter (similar to a vlookup) and then spits out the value for the columns that are identified by the lookup value. If I cannot find the accountid, I leave a value of 10 as default for both "credits remaining" and "credits total". Once the.gs file processes, I want to have that automatically pull into my HTML file to mark the creditsremaining and credtistotal variables. This will in turn populate the text and make the bar graph calculate a width.

Any thoughts on how to pass over the variables correctly?

.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

You could simply do this.

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