Question

0

294

Views

JavaScript not changing DOM in my HTML Template after load in Apps Script

I am trying to build a simple dashboard where if user access their dashboard it will show data from the google spreadsheet. But There is one problem I don't know why only my first div is getting target via JavaScript not the second one..

any Help and solution would apricated..

Why My Second Line Targeting div id="load1" is not executing ????

Code.gs

`function loadDetails(id){
   var ss = SpreadsheetApp.openById("14RM_170AefKbQq82NXAdSOemQLyAGcv_BTwYWd1-qtM")
   var ws = ss.getSheetByName("Data")
   var data = ws.getDataRange().getValues()
     for(var i=0; i<data.length; i++){
         var row = data[i]
        if(row[0]== id){
           password = {
             psd: row[1],
             id: row[0]
            }
         }
      }
      if(row[0]!= id){
          password = "not found"
    }
      return password;
 }`

Dashboard.HTML

<!DOCTYPE html>
  <html>

  <head>
  <base target="_top">
  </head>

<body>
   <h1>Hey this is other Employee Dashboard</h1>
   <p>Your Employee Id: = </p>
   <p>Your Password : = </P>
   <div id="load">
   <div>
   <div id="load1">
   <div>

<script>
     window.onload = function(){
        var id = "MN00018"
        google.script.run.withSuccessHandler(function(output){
        document.getElementById("load").innerHTML = `passing objects are ${output.psd} & ${output.id}`
        document.getElementById("load1").innerHTML = `passing objects are ${output.id}`
    }).loadDetails(id)
   }
</script>

</body>
</html>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T11:18:57.299Z

If you are actually testing your showing script, I think that there are 2 modification points.

HTML & Javascript side:

The tag of div is not enclosed. How about modifying as follows?

From:

<div id="load">
<div>
<div id="load1">
<div>

To:

<div id="load">
</div>
<div id="load1">
</div>

I think that this is the reason of your issue of Why My Second Line Targeting div id="load1" is not executing ????.

Google Apps Script side:

At Google Apps Script side, by if(row[0]!= id){password = "not found"}, even when id is found from the column "A", "not found" is returned. How about modifying as follows?

Modified script:

function loadDetails(id) {
  var ss = SpreadsheetApp.openById("###");
  var ws = ss.getSheetByName("Data")
  var data = ws.getDataRange().getValues()
  var password = {psd: "", id: ""};
  for (var i = 0; i < data.length; i++) {
    var row = data[i]
    if (row[0] == id) {
      password = {
        psd: row[1],
        id: row[0]
      }
      break;
    }
  }
  return password;
}

0

294