问题描述
我试图通过提交按钮输入条目并相应地将数据发送到电子表格中。但是,提交按钮没有尝试任何操作,因为 code.gs 中的 userClicked 函数中的错误显示 TypeError:无法读取未定义的属性“name_dropdwn”。 姓名 字段由电子表格填充,其中 电子邮件 字段与电子表格中的数据匹配并自动填充字段答案。我正在关注此 tutorial on youtube,但出现错误。有大佬知道怎么解决吗?
page.html
<div class="inner-card"><!--start row-->
<label>Name</label>
<select class="browser-default" id="name_dropdwn" onchange="getAutofill()" type="text" required>
<option value="" disabled selected>Select your name</option>
<?!= list; ?>
</select>
</div><!--end row-->
<div class="inner-card"><!--start row-->
<label>Your Email: </label>
<input disabled id="autofill_email" type="text" class="validate">
</div><!--end row-->
js.html
document.getElementById("btn").addEventListener("click",doStuff);
document.getElementById("name_dropdwn").addEventListener("input",getAutofill);
function doStuff(){
var userInfo = {};
userInfo.name_dropdwn = document.getElementById("name_dropdwn").value;
userInfo.autofill_email = document.getElementById("autofill_email").value;
google.script.run.userClicked(userInfo);
document.getElementById("autofill_email").value=" ";
M.updateTextFields();
var myApp = document.getElementById("name_dropdwn");
myApp.selectedindex = 0;
M.FormSelect.init(myApp);
}
function getAutofill(){
var nameCode = document.getElementById("name_dropdwn").value;
google.script.run.withSuccessHandler(updateAutofill).getPopulate(nameCode);
}
function updateAutofill(theEmail){
document.getElementById("autofill_email").value = theEmail;
M.updateTextFields();
}
code.gs
function doGet(e) {
var ss = SpreadsheetApp.openByUrl(url);//open URL of spreadsheet
var ws = ss.getSheetByName("Populate");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();//(row,col,no. of rows,no. of column)
var htmlListArray = list.map(function(r){return '<option>' + r[0] + '</option>';}).join('');
Logger.log(htmlListArray);
var tmp = HtmlService.createTemplateFromFile("page");//running the <?= include ?> pieces in page.html file
tmp.list = htmlListArray;//create variable list to pass in page.html
return tmp.evaluate();
}
//submitted
function userClicked(userInfo){
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
//[an array of column(s)]
ws.appendRow([new Date(),userInfo.name_dropdwn,userInfo.autofill_email ]);
}
//include js and css files into page.html
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
//populate name list fxn
function getPopulate(nameCode){
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName('Populate');
var data = ws.getRange(1,ws.getLastRow(),7).getValues();
var nameList = data.map(function(r){return r[0];});
var emailList = data.map(function(r){return r[1];});
var position = nameList.indexOf(nameCode);
if (position > -1) {
return emailList[position];
}
else {
return 'unavailable';
}
}
更新: 我设法通过在 js.html 上添加 console.log 来解决它,并发现它在 userInfo 值上返回 null,因为我没有将我的 javascript 文件包含到我的 html 文件中。我设法通过添加到我的 html 文件的标签中来解决它,其中 js.html 是我的 javascript 文件。谢谢你们! 也感谢@nenad 和@kessy 的帮助!
解决方法
这意味着 userInfo
是 undefined
函数中的 userClicked
。在将数据传递给函数之前尝试 console.log
。