Javascript 添加更多文本字段

我在这里找到的电子表格中有一个搜索脚本。大部分我都懂，但不是全部。我想要的是添加更多显示该数据的文本框。我尝试添加下面的行，但得到

TypeError:无法调用未定义的方法“add”。（第41行）

第41行包含

hpanel3.add（label4）.add（label5）.add（label6）.add（label7）

，它只是上述代码的一个不同数字的副本。脚本在没有这些行的情况下工作

// G. Variables
var sh = SpreadsheetApp.getActiveSheet();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var lastrow = ss.getLastRow();
//
function onOpen() {
  var menuEntries = [ {name: "Search GUI", functionName: "searchUI"},
                     ];
  ss.addMenu("Search Utilities",menuEntries);// custom menu
}
// Build a simple UI to enter search item and show results + activate result's row
function searchUI() {
  var app = UiApp.createApplication().setHeight(200).setWidth(600);
  app.setTitle("Search by anything");
  var panel = app.createVerticalPanel();
  var txtBox = app.createTextBox().setFocus(true);
  var label=app.createLabel(" Item to search for :")
  panel.add(label);
  txtBox.setId("item").setName("item");
//
  var label0=app.createLabel("Row").setWidth("40");
  var label1=app.createLabel("Name").setWidth("120");
  var label2=app.createLabel("ID").setWidth("120");
  var label3=app.createLabel("Street").setWidth("200");
  var hpanel = app.createHorizontalPanel();
  hpanel.add(label0).add(label1).add(label2).add(label3)
//
  var txt0=app.createTextBox().setId("lab0").setName("0").setWidth("40");
  var txt1=app.createTextBox().setId("lab1").setName("txt1").setWidth("120");
  var txt2=app.createTextBox().setId("lab2").setName("txt2").setWidth("120");
  var txt3=app.createTextBox().setId("lab3").setName("txt3").setWidth("250");
  var hpanel2 = app.createHorizontalPanel();
  hpanel2.add(txt0).add(txt1).add(txt2).add(txt3)
//                   
//
//  var label4=app.createLabel("Phone").setWidth("120");
//  var label5=app.createLabel("Pet Name").setWidth("120");
//  var label6=app.createLabel("Breed").setWidth("120");
//  var label7=app.createLabel("Gender").setWidth("120");
//  var hpanel = app.createHorizontalPanel();
//  hpanel3.add(label4).add(label5).add(label6).add(label7)
////
//  var txt4=app.createTextBox().setId("lab4").setName("txt4").setWidth("40");
//  var txt5=app.createTextBox().setId("lab5").setName("txt5").setWidth("120");
//  var txt6=app.createTextBox().setId("lab6").setName("txt6").setWidth("120");
//  var txt7=app.createTextBox().setId("lab7").setName("txt7").setWidth("250");
//  var hpanel3 = app.createHorizontalPanel();
//  hpanel4.add(txt4).add(txt5).add(txt6).add(txt7)
//
  var hidden = app.createHidden().setName("hidden").setId("hidden");
  var subbtn = app.createButton("next ?").setId("next").setWidth("250");
  var link = app.createAnchor('', '').setId('link');
  panel.add(txtBox);
  panel.add(subbtn);
  panel.add(hidden);
  panel.add(hpanel);
  panel.add(hpanel2);
//  panel.add(hpanel3);
//  panel.add(hpanel4);
  panel.add(link);
  var keyHandler = app.createServerHandler("click");
  txtBox.addKeyUpHandler(keyHandler)
  keyHandler.addCallbackElement(panel);
//
  var submitHandler = app.createServerHandler("next");
  subbtn.addClickHandler(submitHandler);
  submitHandler.addCallbackElement(panel);
//
  app.add(panel);  
  ss.show(app);
  }
//
function click(e){
   var row=ss.getActiveRange().getRowIndex();              
   var app = UiApp.getActiveApplication();
   var txtBox = app.getElementById("item");
   var subbtn = app.getElementById("next").setText("next ?")      
   var txt0=app.getElementById("lab0").setText('--');
   var txt1=app.getElementById("lab1").setText('no match').setStyleAttribute("background", "white");// default value to start with
   var txt2=app.getElementById("lab2").setText('');
   var txt3=app.getElementById("lab3").setText('');     
//   var txt4=app.getElementById("lab4").setText('');
//   var txt5=app.getElementById("lab5").setText('');
//   var txt6=app.getElementById("lab6").setText('');
//   var txt7=app.getElementById("lab7").setText('');
   var link=app.getElementById('link').setText('').setHref('')
   var item=e.parameter.item.toLowerCase(); // item to search for
   var hidden=app.getElementById("hidden")                  
   var data = sh.getRange(3,1,lastrow,18).getValues();// get the 18 columns of data
       for(nn=0;nn<data.length;++nn){ ;// iterate trough
         if(data[nn].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){;// if a match is found in one of the 18 fields, break the loop and show results
          txt0.setText(nn+3);
          txt1.setText(data[nn][0]).setStyleAttribute("background", "cyan");
          txt2.setText(data[nn][2]);
          txt3.setText(data[nn][4]);
//          txt4.setText(data[nn][5]);
//          txt5.setText(data[nn][6]);
//          txt6.setText(data[nn][7]);
//          txt7.setText(data[nn][8]);
          link.setText(data[nn][0]).setHref(data[nn][0]);
          sh.getRange(nn+3,1).activate();
          subbtn.setText("found '"+item+"' in row "+Number(nn+3)+", next ?");
          hidden.setValue(nn.toString())                                                                                  
          break
          }
      }
return app    ;// update UI
}
function next(e){
   var row=ss.getActiveRange().getRowIndex();              
   var app = UiApp.getActiveApplication();
   var txtBox = app.getElementById("item");
   var subbtn = app.getElementById("next").setText("no other match")      
   var hidden=app.getElementById("hidden");                  
   var start=Number(e.parameter.hidden)+1;//returns the last search index stored in the UI
   var item=e.parameter.item.toLowerCase(); // item to search for
   var txt0=app.getElementById("lab0");
   var txt1=app.getElementById("lab1").setStyleAttribute("background", "yellow");
   var txt2=app.getElementById("lab2");
   var txt3=app.getElementById("lab3");
   var link=app.getElementById('link').setText('').setHref('')
   var data = sh.getRange(3,1,lastrow,18).getValues();// get the 18 columns of data
       for(nn=start;nn<data.length;++nn){ ;// iterate trough
         if(data[nn].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){;// if a match is found in one of the 4 fields, break the loop and show results
          txt0.setText(nn+3);
          txt1.setText(data[nn][0]).setStyleAttribute("background", "cyan");
          txt2.setText(data[nn][2]);
          txt3.setText(data[nn][4]);
          link.setText(data[nn][0]).setHref(data[nn][0])
          sh.getRange(nn+3,1).activate();
          subbtn.setText("found '"+item+"' in row "+Number(nn+3)+", next ?");                                                                                               
          hidden.setValue(nn.toString())                                                                                  
          break
          }
      }
return app    ;// update UI
}

//G.变量
var sh=SpreadsheetApp.getActiveSheet（）；
var ss=SpreadsheetApp.getActiveSpreadsheet（）；
var lastrow=ss.getLastRow（）；
//
函数onOpen（）{
var menuEntries=[{name:“搜索GUI”，functionName:“搜索UI”}，
];
ss.addMenu（“搜索实用程序”，菜单）；//自定义菜单
}
//构建一个简单的用户界面，输入搜索项目并显示结果+激活结果行
函数searchUI（）{
var app=UiApp.createApplication（）.setHeight（200）、setWidth（600）；
app.setTitle（“通过任何方式搜索”）；
var panel=app.createVerticalPanel（）；
var txtBox=app.createTextBox（）.setFocus（true）；
var label=app.createLabel（“要搜索的项目：”）
面板。添加（标签）；
txtBox.setId（“项目”）.setName（“项目”）；
//
var label0=app.createLabel（“行”）.setWidth（“40”）；
var label1=app.createLabel（“名称”）.setWidth（“120”）；
var label2=app.createLabel（“ID”）.setWidth（“120”）；
var label3=app.createLabel（“街道”）.setWidth（“200”）；
var hpanel=app.createHorizontalPanel（）；
hpanel.add（label0）.add（label1）.add（label2）.add（label3）
//
var txt0=app.createTextBox（）.setId（“lab0”）.setName（“0”）.setWidth（“40”）；
var txt1=app.createTextBox（）.setId（“lab1”）.setName（“txt1”）.setWidth（“120”）；
var txt2=app.createTextBox（）.setId（“lab2”）.setName（“txt2”）.setWidth（“120”）；
var txt3=app.createTextBox（）.setId（“lab3”）.setName（“txt3”）.setWidth（“250”）；
var hpanel2=app.createHorizontalPanel（）；
hpanel2.add（txt0.add（txt1.add）（txt2.add）（txt3）
//                   
//
//var label4=app.createLabel（“电话”）.setWidth（“120”）；
//var label5=app.createLabel（“宠物名”）.setWidth（“120”）；
//var label6=app.createLabel（“品种”）.setWidth（“120”）；
//var label7=app.createLabel（“性别”）.setWidth（“120”）；
//var hpanel=app.createHorizontalPanel（）；
//hpanel3.add（label4.add（label5.add）（label6.add）（label7）
////
//var txt4=app.createTextBox（）.setId（“lab4”）.setName（“txt4”）.setWidth（“40”）；
//var txt5=app.createTextBox（）.setId（“lab5”）.setName（“txt5”）.setWidth（“120”）；
//var txt6=app.createTextBox（）.setId（“lab6”）.setName（“txt6”）.setWidth（“120”）；
//var txt7=app.createTextBox（）.setId（“lab7”）.setName（“txt7”）.setWidth（“250”）；
//var hpanel3=app.createHorizontalPanel（）；
//hpanel4.add（txt4.add（txt5.add）（txt6.add）（txt7）
//
var hidden=app.createHidden（）.setName（“隐藏”）.setId（“隐藏”）；
var subbtn=app.createButton（“下一步”）.setId（“下一步”）.setWidth（“250”）；
var link=app.createAnchor（“”，）.setId（'link'）；
面板。添加（txtBox）；
面板。添加（子BTN）；
面板。添加（隐藏）；
面板。添加（hpanel）；
面板。添加（hpanel2）；
//面板。添加（hpanel3）；
//面板。添加（hpanel4）；
面板。添加（链接）；
var keyHandler=app.createServerHandler（“单击”）；
addKeyUpHandler（keyHandler）
keyHandler.addCallbackElement（面板）；
//
var submitHandler=app.createServerHandler（“下一步”）；
subbtn.addClickHandler（submitHandler）；
submitHandler.AddCallback元素（面板）；
//
应用程序添加（面板）；
ss.show（app）；
}
//
功能点击（e）{
var row=ss.getActiveRange（）.getRowIndex（）；
var app=UiApp.getActiveApplication（）；
var txtBox=app.getElementById（“项目”）；
var subbtn=app.getElementById（“下一步”）.setText（“下一步”）
var txt0=app.getElementById（“lab0”）.setText（'--'）；
var txt1=app.getElementById（“lab1”）.setText（“不匹配”）.setStyleAttribute（“背景”、“白色”）；//开始时的默认值
var txt2=app.getElementById（“lab2”）.setText（“”）；
var txt3=app.getElementById（“lab3”）.setText（“”）；
//var txt4=app.getElementById（“lab4”）.setText（“”）；
//var txt5=app.getElementById（“lab5”）.setText（“”）；
//var txt6=app.getElementById（“lab6”）.setText（“”）；
//var txt7=app.getElementById（“lab7”）.setText（“”）；
var link=app.getElementById（'link'）.setText（''）.setHref（''）
var item=e.parameter.item.toLowerCase（）；//要搜索的项
var hidden=app.getElementById（“隐藏”）
var data=sh.getRange（3,1，lastrow，18）.getValues（）；//获取18列数据
对于（nn=0；nn“已定义”表示已为当前作用域中的变量指定了一个值。如果您正在调试器中查看，则将看到作用域中“已声明”的所有变量，即使它们尚未定义

您对各种
hpanel
的定义顺序不正确。在第41行，您尚未定义
hpanel3
（错误消息没有骗您！）。您似乎想在第40行定义它，但您重新定义了
hpanel

稍后，第47行定义了
hpanel3
，但第48行尝试分配给尚未定义的
hpanel4
。这将产生相同的错误

顺便说一句，你不需要把注释放在空行中……它们可以是空的。
嗨，我是这个脚本的原始作者，很高兴看到你使用它；-）也就是说，你必须用新字段更新next（）函数……别忘了它，否则你会失去上一个/下一个功能。嗨，莫格斯戴德，你的（非常）想法是对的小评论…正如我在这篇文章的另一条评论中提到的，我不久前写了这个脚本，当时我“讨厌”看到空白行（说^^）…现在我长大了，我不再害怕空虚了！我想我现在可以说我是个大男孩了；-）