TypeError: Cannot read property 'shet' of undefined

Question

There was an error that I don't know where it was wrong. I recently started writing code from YouTube. So I would like to have some advice on where I should fix it and make the code work.

    **code**

    function doGet() {
      

  return HtmlService.createHtmlOutputFromFile("inded");
    }
function userClicked(data){
var url ="myurl";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName([data.shet]);
ws.appendRow([data.nb,data.kun,data.bath,data.tod,data.bon,data.lan,data.sam,data.ha]); 
}

The only information(nb,kun,bath,tod,bon,lan,sam,ha) I will enter is numbers. The 'shet' is the number of the sheet.

**html**
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <h1>กรอกเลข</h1>
   <div>
   <label>ใบที่</label><input type="text" id="shet">
   </div>
   <div>
   <label>ตัวเลข</label><input type="text" id="nb">
   </div>
   <div>
   <label>คูณ กลับ</label><input type="text" id="kun">
   </div>
   <div>
   <label>เต็ง บาท </label><input type="text" id="bath">
   </div>
   <div>
   <label>โต๊ด</label><input type="text" id="tod">
   </div>
   <div>
   <label>วิ่งบน</label><input type="text" id="bon">
   </div>
   <div>
   <label>วิ่งล่าง</label><input type="text" id="lan">
   </div>
   <div>
   <label>2ใน3</label><input type="text" id="sam">
   </div>
   <div>
   <label>2ใน5</label><input type="text" id="ha">
   </div>
   <div>
   <button id="btn"> บันทึกข้อมูล </button>
   </div>
   <script>
     document.getElementById("btn").addEventListener("click", saveData);
     
     function saveData() {
     var data = {}
         data.shet = document.getElementById("shet").value;
         data.nb = document.getElementById("nb").value;
         data.kun = document.getElementById("kun").value;
         data.bath = document.getElementById("bath").value;
         data.tod = document.getElementById("tod").value;
         data.bon = document.getElementById("bon").value;
         data.lan = document.getElementById("lan").value;
         data.sam = document.getElementById("sam").value;
         data.ha = document.getElementById("ha").value;
     google.script.run.userClicked(data);
     document.getElementById("shet").value="";
     document.getElementById("nb").value="";
     document.getElementById("kun").value="";
     document.getElementById("bath").value="";
     document.getElementById("tod").value="";
     document.getElementById("bon").value="";
     document.getElementById("lan").value="";
     document.getElementById("sam").value="";
     document.getElementById("ha").value="";
     
     }
    </script>
  </body>
</html>

Welcome to [so]. Please add more details about the steps to followed to execute the code. — Rubén, Sep 13 '20 at 22:03

score 1 · Answer 1 · answered Sep 14 '20 at 12:39

Issue:

userClicked is supposed to run when the submit button in your HTML is clicked. In this case, the data you entered in your HTML <input> elements is passed as an argument. Instead, you're trying to execute userClicked directly from the script editor, so data is not passed as an argument: data is undefined, and hence the error you're getting.

Solution:

If you want to test this from your script editor, add some default data in case no data is passed as an argument. Something like this:

function userClicked(data) {
  if (!data) {
    var data = {};
    data.shet = 1;
    data.nb = "Whatever";
    // Rest of `data` properties
  }
  // Rest of your function
}

But keep in mind that this is supposed to be called from your HTML.

Other issues:

If the submitted shet value is the name of the sheet you want to get, you should just remove the [] from var ws = ss.getSheetByName([data.shet]); (getSheetByName(name) should receive a String), even though the data will probably be appended anyway to the sheet if you don't change anything.
If the submitted shet value is a number corresponding to the index of your desired sheet, you should change that to var ws = ss.getSheets()[data.shet]; (see getSheets()), but take into account that the index is 0-based.

Modification point:

Your current solution is not looking for the number of the sheet.
As you can see in the .gs file, you are asking for the name of the sheet:
```
var ws = ss.getSheetByName([data.shet]);
```
In order to specify the number of the sheet use getSheets() instead:
```
var ws = ss.getSheets()[data.shet];
```

It is important to mention that ss.getSheets() is an array of all the sheet objects in the spreadsheet file. To specify the first sheet (from left to right) the numbering starts from 0 and thus ss.getSheets()[0]. Therefore, in your webapp, if you want to interact with the first sheet, you need to pass 0 in the first field. If you want the second sheet then 1 etc..

Solution:

Modify only the .gs code as follows:

function doGet() {
   return HtmlService.createHtmlOutputFromFile("inded");
}
function userClicked(data){
   var url ="myurl";
   var ss = SpreadsheetApp.openByUrl(url);
   var ws = ss.getSheets()[data.shet];
 ws.appendRow([data.nb,data.kun,data.bath,data.tod,data.bon,data.lan,data.sam,data.ha]); 
}

Keep the inded.html file as it is.

Instructions (if applicable):

In case you haven't done it already, you need to deploy this project as a web app.

Please follow these steps:

Click on Publish => Deploy as web app

Click on deploy in the pop up window and open the newly created web app URL.

Note that if you have already deployed your web app, after you make the changes, you need to follow step 1 and then update the current project.

TypeError: Cannot read property 'shet' of undefined

2 Answers2

Issue:

Solution:

Other issues:

Related:

Modification point:

Solution:

Instructions (if applicable):