title: Passing variable from Code.gs to html in Google App Script
body: <p>I am a beginner to Google App Script. I am developing a payment system where after logging in the user should able to view their fist name and last name. I have done the coding but I dont know why its not working for me. I have attached images and my coding to explain myself better. Thank you so much.
  <a href="https://i.stack.imgur.com/kFpdA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kFpdA.jpg" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/ib6hT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ib6hT.jpg" alt="enter image description here" /></a></p>
  <p><strong>Code.gs</strong></p>
  <pre><code>var url = &quot;https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006&quot;;
  var streetSheetName = &quot;JALAN SANGGUL 4&quot;;
  
  function doGet(e) {
    var streetSheetName = &quot;JALAN SANGGUL 4&quot;; // Added
    PropertiesService.getScriptProperties().setProperty(&quot;streetSheetName&quot;, streetSheetName); // Added
    return HtmlService.createHtmlOutputFromFile('WebAppLogin');
  }
  
  function checkLogin(username, password) {
    var found_record = '';
    var name = '';
    var ss = SpreadsheetApp.openByUrl(url);
    var webAppSheet = ss.getSheetByName(&quot;USERNAMES&quot;);
    var getLastRow =  webAppSheet.getLastRow();
    
    for(var i = 2; i &lt;= getLastRow; i++) {
     if(webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() &amp;&amp; webAppSheet.getRange(i, 7).getValue() == password) {
       found_record = 'TRUE';
       name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + &quot; &quot; + webAppSheet.getRange(i, 5).getValue().toUpperCase();
       streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
     } else if (username.toUpperCase() == 'ADMIN' &amp;&amp; password == 'ADMINPASSWORD') {
       found_record = 'TRUE';
       name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + &quot; &quot; + webAppSheet.getRange(i, 5).getValue().toUpperCase();
       streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
     }    
    }
  
  PropertiesService.getScriptProperties().setProperty(&quot;streetSheetName&quot;, streetSheetName); // Added
  if(found_record == '') {
    found_record = 'FALSE'; 
  }
  
    return [found_record, username,name];
  }
  
  function GetRecords(username,filter) {
    var filteredDataRangeValues = GetUsernameAssociatedProperties(username);
    var resultArray = GetPaymentRecords(filteredDataRangeValues,filter);
    var resultFilter = getYears();
  
    result = {
      data: resultArray,
      filter: resultFilter
    };
    return result;
  }
  
  function getYears() { 
    var ss= SpreadsheetApp.openByUrl(url);
    var yearSheet = ss.getSheetByName(&quot;Configuration&quot;); 
    var getLastRow = yearSheet.getLastRow();
    var return_array = [];
    for(var i = 2; i &lt;= getLastRow; i++)
    {
        if(return_array.indexOf(yearSheet.getRange(i, 2).getDisplayValue()) === -1) {
          return_array.push(yearSheet.getRange(i, 2).getDisplayValue());
        }
    }
    return return_array;  
  }
  
  function GetUsernameAssociatedProperties(username) {
    var filteredDataRangeValues = '';
    var ss = SpreadsheetApp.openByUrl(url);
    var displaySheet = ss.getSheetByName(&quot;USERNAMES&quot;);
    var dataRangeValues = displaySheet.getDataRange().getValues();
    if (username.toUpperCase() == 'ADMIN') {
      dataRangeValues.shift();
      filteredDataRangeValues = dataRangeValues;
    } else {
      filteredDataRangeValues = dataRangeValues.filter(row =&gt; row[0].toUpperCase() == username.toUpperCase());
    }
    return filteredDataRangeValues;  
  }
  
  function GetPaymentRecords(userProperties,filter) {
    var streetSheetName = PropertiesService.getScriptProperties().getProperty(&quot;streetSheetName&quot;); // Added
    var transpose = m =&gt; m[0].map((_, i) =&gt; m.map(x =&gt; x[i]));
    var resultArray = [];
    var ss = SpreadsheetApp.openByUrl(url);
    var displaySheet = ss.getSheetByName(streetSheetName);
    var addressValues = displaySheet.getRange(&quot;B:C&quot;).getValues();
    var paidMonthValues = displaySheet.getRange(1, 7, displaySheet.getLastRow(), displaySheet.getLastColumn() - 6).getValues();
    //Logger.log(addressValues);
    //Logger.log(transpose(paidMonthValues));
    userProperties.forEach((v, i) =&gt; {
      var userHouseNumber = v[1];
      var userStreet = v[2];
      var column = addressValues.reduce(function callbackFn(accumulator, currentValue, index, array) {
        if (currentValue[0] == userHouseNumber &amp;&amp; currentValue[1] == userStreet) {
          return index
        } else {
          return accumulator
        }
      }, '');
      //Logger.log(column);
      Logger.log(filter)
      Logger.log(paidMonthValues);
      
      if(filter==&quot;None&quot;){
        var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
          return [element[0], userHouseNumber, userStreet, element[column] || '']
        });
      }else{
        var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
          if(element[0].includes(filter))return [element[0], userHouseNumber, userStreet, element[column] || '']
        });
      }
      
      resultArray = resultArray.concat(result);
      //Logger.log(resultArray);  
    })
  
    //Remove null elements
    resultArray = resultArray.filter(element=&gt;{
      Logger.log(element!=null)
      return element != null;
    });
    return resultArray;
  }
  </code></pre>
  <p><strong>WebAppLogin.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base target=&quot;_top&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot; 
      integrity=&quot;sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
      function GetRecords() {
        var spin = &quot;&lt;span class=\&quot;spinner-border spinner-border-sm\&quot; role=\&quot;status\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/span&gt;&quot;;
        spin += &quot; Loading...&quot;;
        document.getElementById(&quot;LoginButton&quot;).innerHTML = spin;
  
        var username = document.getElementById(&quot;username&quot;).value;
        var password = document.getElementById(&quot;password&quot;).value;
        
        google.script.run.withSuccessHandler(function(output) {
          console.log(output);
          var username = output[1];
          var name = output[2];
          if(output[0] == 'TRUE') {
            document.getElementById(&quot;loginDisplay&quot;).style.display = &quot;none&quot;;
            document.getElementById(&quot;dataDisplay&quot;).style.display = &quot;block&quot;;  
            document.getElementById(&quot;errorMessage&quot;).innerHTML = &quot;&quot;;
            document.getElementById(&quot;currentUser&quot;).value = username;
            google.script.run.withSuccessHandler(displayTable).GetRecords(username,&quot;None&quot;);
  
          } else if(output[0] == 'FALSE') {
            document.getElementById(&quot;firstLastName&quot;).innerHTML = &quot;&quot;;
            document.getElementById(&quot;currentUser&quot;).value = &quot;&quot;;
            document.getElementById(&quot;myFilter&quot;).innerHTML = &quot;&quot;;
            document.getElementById(&quot;errorMessage&quot;).innerHTML = &quot;Failed to Login&quot;;
            document.getElementById(&quot;LoginButton&quot;).innerHTML = &quot;Login&quot;;   
          }
        }).checkLogin(username, password);
      }
      
      function filter(){
        var filterStr = document.getElementById(&quot;filterYear&quot;).value;
        var user = document.getElementById(&quot;currentUser&quot;).value;
        google.script.run.withSuccessHandler(displayTable).GetRecords(user,filterStr);
      }
  
      function displayTable(result) {
        var ar = result.data;
        var filterString = result.filter;
        ar = ar.sort((a, b) =&gt; new Date(a).getTime() &gt; new Date(b).getTime() ? -1 : 1).splice(-12); // &lt;--- Added
        var username = document.getElementById(&quot;currentUser&quot;).value;
        if(ar.length &gt; 0) {
          var displayTable = '&lt;table class=\&quot;table\&quot; id=\&quot;mainTable\&quot; &gt;';
  
          displayTable += &quot;&lt;tr&gt;&quot;;
          displayTable += &quot;&lt;th&gt;Month&lt;/th&gt;&quot;;
          displayTable += &quot;&lt;th&gt;House Number&lt;/th&gt;&quot;;
          displayTable += &quot;&lt;th&gt;Street&lt;/th&gt;&quot;;
          displayTable += &quot;&lt;th&gt;Payment Status&lt;/th&gt;&quot;;
          displayTable += &quot;&lt;/tr&gt;&quot;;
  
          ar.forEach(function(item, index) {
            displayTable += &quot;&lt;tr&gt;&quot;;
            displayTable += &quot;&lt;td&gt;&quot;+item[0]+&quot;&lt;/td&gt;&quot;;
            displayTable += &quot;&lt;td&gt;&quot;+item[1]+&quot;&lt;/td&gt;&quot;;
            displayTable += &quot;&lt;td&gt;&quot;+item[2]+&quot;&lt;/td&gt;&quot;;
            displayTable += &quot;&lt;td&gt;&quot;+item[3]+&quot;&lt;/td&gt;&quot;;
            displayTable += &quot;&lt;/tr&gt;&quot;;
          });
  
          displayTable += &quot;&lt;/table&gt;&quot;;
  
        } else {
          var displayTable = &quot;&lt;span style=\&quot;font-weight: bold\&quot; &gt;No Records Found&lt;/span&gt;&quot;;
        }
        
         var filter = '';
        if(filterString.length &gt; 0) {
          filter += '&lt;label for=&quot;years&quot; style=&quot;font-size: 20px&quot;&gt;Years&lt;/label&gt;&lt;br&gt;&lt;select class=&quot;form-control form-control-sm&quot; id=&quot;filterYear&quot; name=&quot;years&quot; required&gt;&lt;option value=&quot;&quot; selected&gt;Choose...&lt;/option&gt;';
          
          filterString.forEach(str =&gt; {
            filter += '&lt;option value=&quot;'+str+'&quot;&gt;'+str+'&lt;/option&gt;';
          });
  
  
          filter += '&lt;/select&gt;&lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; id=&quot;FilterButton&quot; onclick=&quot;filter()&quot; &gt;Submit&lt;/button&gt;';
        }
        
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth();
        if (!ar.some(([a,,,d]) =&gt; {
          var t = new Date(a);
          return year == t.getFullYear() &amp;&amp; month == t.getMonth() &amp;&amp; d.toUpperCase() == &quot;PAID&quot;;
          })) {
                document.getElementById(&quot;digitalgoods-030521182921-1&quot;).style.display = &quot;block&quot;;
              }
        document.getElementById(&quot;displayRecords&quot;).innerHTML = displayTable;
        document.getElementById(&quot;firstLastName&quot;).innerHTML = &quot;USER: &quot; + name;
        document.getElementById(&quot;myFilter&quot;).innerHTML = filter;
        document.getElementById(&quot;LoginButton&quot;).innerHTML = &quot;Login&quot;;
        document.getElementById(&quot;username&quot;).value = '';
        document.getElementById(&quot;password&quot;).value = '';
      }
      
      //change the link according to ur webapp latest version
      function LogOut(){  
        window.open(&quot;https://script.google.com/macros/s/AKfycbwKa4sQ441WUIqmU40laBP0mfiqNMiN-NghEvwUnJY/dev&quot;,'_top');
      }
        
      function changePassword(){
        var result = confirm(&quot;Want to Change Password?&quot;);
        if (result) {
          google.script.run
            .withSuccessHandler(updateButton)
            .getEmail()
          alert('Password changed');
        }
      }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;h2&gt; Resident Payment Status Portal&lt;/h2&gt;
  
    &lt;div id=&quot;loginDisplay&quot; style=&quot;padding: 10px;&quot; &gt;
  
      &lt;div class=&quot;form-row&quot;&gt;
        &lt;div class=&quot;form-group col-md-3&quot;&gt;
        &lt;label&gt;User Name&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;username&quot; class=&quot;form-control&quot; required/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-row&quot;&gt;
        &lt;div class=&quot;form-group col-md-3&quot;&gt;
        &lt;label&gt;Password&lt;/label&gt;&lt;br&gt;
        &lt;input type=&quot;password&quot; id=&quot;password&quot; class=&quot;form-control&quot; required/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; id=&quot;LoginButton&quot; onclick=&quot;GetRecords()&quot; &gt;
        Login      
      &lt;/button&gt;
  
      &lt;span id=&quot;errorMessage&quot; style=&quot;color: red&quot; &gt;&lt;/span&gt;
  
    &lt;/div&gt;
    
    &lt;hr&gt;
    &lt;div style=&quot;display:none&quot; id=&quot;dataDisplay&quot;  &gt;
      &lt;div&gt;
        &lt;h2 id=&quot;firstLastName&quot;&gt;&lt;/h2&gt;
      &lt;/div&gt;
      &lt;input type=&quot;hidden&quot; id=&quot;currentUser&quot; value=&quot;&quot;/&gt;
      &lt;div id =&quot;myFilter&quot; class=&quot;form-group&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;displayRecords&quot; style=&quot;padding: 10px;&quot; &gt;&lt;/div&gt;
  
    &lt;!----Paypal Button--------&gt;
      &lt;hr&gt;
      &lt;div id=&quot;digitalgoods-030521182921-1&quot; style=&quot;display: none;&quot;&gt;&lt;/div&gt;
       &lt;script&gt;(function (div, currency) {var item_total = {currency_code: currency,value: '50.00',},tax_total = {currency_code: currency,value: '0.00' },render = function () {window.paypal.Buttons({createOrder: function (data, actions) {return actions.order.create({application_context: {brand_name: &quot;&quot;,landing_page: &quot;BILLING&quot;,shipping_preference: &quot;NO_SHIPPING&quot;,payment_method: {payee_preferred: &quot;UNRESTRICTED&quot;}},purchase_units: [{description: &quot;&quot;,soft_descriptor: &quot;digitalgoods&quot;,amount: {breakdown: {item_total: item_total,tax_total: tax_total},value: '50.00' },items: [{name: &quot;Monthly Fees&quot;,quantity: 1,description: &quot;&quot;,sku: &quot;1&quot;,unit_amount: item_total,tax: tax_total}]}]});},onApprove: function (data, actions) {return actions.order.capture().then(function (details) {div.innerHTML = &quot;Order completed. You\x27ll receive an email shortly!&quot;;});},onCancel: function (data) {},onError: function (err) {div.innerHTML = &quot;&lt;pre&gt;&quot; + err.toString()}}).render(&quot;#digitalgoods-030521182921-1&quot;);},init = function () {window.digitalgoods = window.digitalgoods || [];window.digitalgoods.push(render);var file = &quot;https://www.paypal.com/sdk/js?client-id=AS-86gVX_DfakSkq6YZDJRdKZb4SMIziOd5c9DIKy4extQrpb0VFEprDleB_duKI4BJQQRewUdfliZEf\x26currency=MYR&quot;;var script = document.createElement(&quot;script&quot;);script.type = &quot;text/javascript&quot;;script.src = file;script.onload = function() {var i = window.digitalgoods.length;while (i--) {window.digitalgoods[i]();}};div.appendChild(script);};init();})(document.getElementById(&quot;digitalgoods-030521182921-1&quot;), &quot;MYR&quot;);&lt;/script&gt;
    
    &lt;!-----Change Password-----------&gt;
    &lt;div&gt;
        &lt;!--&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-md&quot; onclick=&quot;changePassword()&quot;&gt;Change Password&lt;/button&gt;--&gt;
        
        &lt;!-- Button trigger modal --&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModalCenter&quot;&gt;
        Change Password
        &lt;/button&gt;
  
        &lt;!-- Modal --&gt;
        &lt;div class=&quot;modal fade&quot; id=&quot;exampleModalCenter&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalCenterTitle&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog modal-dialog-centered&quot; role=&quot;document&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h3 class=&quot;modal-title&quot; id=&quot;exampleModalLongTitle&quot;&gt;Change Password&lt;/h3&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                    &lt;label&gt;Enter New Password&lt;/label&gt;&lt;br&gt;
                    &lt;input type=&quot;password&quot; id=&quot;newPassword&quot; class=&quot;form-control&quot; required/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; onclick=&quot;changePassword()&quot;&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;!-----Log Out-----------&gt;
      &lt;div&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-md&quot; onclick=&quot;LogOut()&quot;&gt;
          &lt;span class=&quot;glyphicon glyphicon-log-out&quot;&gt;&lt;/span&gt; Log out
        &lt;/button&gt;
      &lt;/div&gt;
     
    &lt;/div&gt;
    
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>