javascript - 来自多个文本框的多个 Google 事件

Question

我正在尝试创建一个表单，在多个文本框中保存多个 Google 日历事件，用户应该能够添加另一个文本框来保存另一个事件。创建每个文本框时，其名称将从最后一个开始递增，例如textbox1、textbox2 等。下面的代码显示了我到目前为止的代码，我似乎无法使其工作。任何建议将不胜感激。

function doGet(){

 var app = UiApp.createApplication().setTitle('QuickAdd Events');
 //Create a penel which holds all the form elelemnts
 var parent = app.createHorizontalPanel().setId('parent');
 var left = app.createVerticalPanel().setId('left').setWidth(200);
 var right = app.createVerticalPanel().setId('right');

 var noOfEvents = app.createTextBox().setName('noOfEvents').setValue(1).setWidth(30); 

 var eventTitleLabel = app.createLabel('Event Title:');
 var eventTitle = app.createTextBox().setName('eventTitle').setWidth(200);  
 var eventButton = app.createButton('Create Events');
 var childButton = app.createButton('+ Event');

 left.add(noOfEvents)
     .add(eventTitleLabel)
     .add(eventTitle);

 right.add(eventButton)
      .add(childButton);

 var eventHandler = app.createServerClickHandler('createEvents');
 eventHandler.addCallbackElement(left);
 eventButton.addClickHandler(eventHandler); 

 var panelHandler = app.createServerClickHandler('createAnotherEvent');
 panelHandler.addCallbackElement(left);
 childButton.addClickHandler(panelHandler);

 parent.add(left)
       .add(right);

 app.add(parent);
 app.close();
 return app;
}


function createAnotherEvent(e){
 var app = UiApp.getActiveApplication();

 var numberOfEvents = app.getElementById("noOfEvents");
 numberOfEvents++;
 app.getElementById('noOfEvents').setValue(numberOfEvents);
 var eventTitleLabel = app.createLabel('Event Title:');
 var eventTitle = app.createTextBox().setName('eventTitle'+numberOfEvents).setWidth(200);
 //the new textBox has a new predictable name and you can easily get it in the handler

 app.getElementById('left').add(eventTitleLabel)
                           .add(eventTitle);
 return app;
}

function createEvents(e){
 Logger.log(JSON.stringify(e));
 var app = UiApp.getActiveApplication();

 try{
  var numberOfEvents = Number(e.parameter.noOfEvents);
  for (var i = 1; i < numberOfEvents; i++) {

   var event = e.parameter[eventTitle+i];;

   var cal = CalendarApp.getDefaultCalendar();
   cal.createEventFromDescription(event);

   app.add(app.createLabel('Event created Successfully'));
   }
   //make the form panel invisible
  app.getElementById('parent').setVisible(false);
  return app;
 }

 //If an error occurs, show it on the panel
 catch(e){
  app.add(app.createLabel('Error occured: '+e));
  return app;
 }
}

Answer 1

(我现在没有时间检查所有内容，但这是我看到的错误...)

在此函数中:

function createAnotherEvent(e){
 var app = UiApp.getActiveApplication();

 var numberOfEvents = app.getElementById("noOfEvents"); 

您正在尝试获取小部件中的值，但您得到的是小部件本身(作为 UiApp 对象)，因此您不能使用 numberOfEvents++; 这是一种数字方法。 .

要获取小部件值，请使用var numberOfEvents = Number(e.parameter.numberOfEvents); 因为 e.parameter.numberOfEvents 实际上是一个字符串。

如果该字符串中有非十进制值，您可以使用简单的正则表达式轻松删除它，如下所示: var numberOfEvents = Number(e.parameter.numberOfEvents.replace(/\D/g,'')); ，这样您就可以确保只有数字会作为值传递。

<小时/>

编辑

找到时间进一步...

这是代码的工作版本...确实有一些细节阻止了它的工作:

• noOfEvent 缺少 ID
• eventTitle 的名称不正确(应该添加一个数字，因为稍后您用数字设置了Name

• 获取 'var event = e.parameter['eventTitle'+i];' ，您忘记了构建名称的“”

  function doGet(){
  
   var app = UiApp.createApplication().setTitle('QuickAdd Events');
   //Create a penel which holds all the form elelemnts
   var parent = app.createHorizontalPanel().setId('parent');
   var left = app.createVerticalPanel().setId('left').setWidth(200);
   var right = app.createVerticalPanel().setId('right');
  
   var noOfEvents = app.createTextBox().setName('noOfEvents').setId('noOfEvents').setValue(1).setWidth(30); 
  
   var eventTitleLabel = app.createLabel('Event Title:');
   var eventTitle = app.createTextBox().setName('eventTitle1').setWidth(200);  
   var eventButton = app.createButton('Create Events');
   var childButton = app.createButton('+ Event');
  
   left.add(noOfEvents)
       .add(eventTitleLabel)
       .add(eventTitle);
  
   right.add(eventButton)
        .add(childButton);
  
   var eventHandler = app.createServerClickHandler('createEvents');
   eventHandler.addCallbackElement(left);
   eventButton.addClickHandler(eventHandler); 
  
   var panelHandler = app.createServerClickHandler('createAnotherEvent');
   panelHandler.addCallbackElement(left);
   childButton.addClickHandler(panelHandler);
  
   parent.add(left)
         .add(right);
  
   app.add(parent);
   app.close();
   return app;
  }
  
  function createAnotherEvent(e){
   var app = UiApp.getActiveApplication();
   var noOfEvents = Number(e.parameter.noOfEvents.replace(/\D/g,''));;
   noOfEvents++;
   app.getElementById('noOfEvents').setValue(noOfEvents);
   var eventTitleLabel = app.createLabel('Event Title:');
   var eventTitle = app.createTextBox().setName('eventTitle'+noOfEvents).setWidth(200);
   //the new textBox has a new predictable name and you can easily get it in the handler
  
   app.getElementById('left').add(eventTitleLabel)
                             .add(eventTitle);
   return app;
  }
  
  function createEvents(e){
   Logger.log(JSON.stringify(e));
   var app = UiApp.getActiveApplication();
  
   try{
    var noOfEvents = Number(e.parameter.noOfEvents.replace(/\D/g,''));;
    for (var i = 1; i <= noOfEvents; i++) {
  
     var event = e.parameter['eventTitle'+i];;
  
     var cal = CalendarApp.getDefaultCalendar();
     cal.createEventFromDescription(event);
  
     app.add(app.createLabel('Event created Successfully'));
     }
     //make the form panel invisible
    app.getElementById('parent').setVisible(false);
    return app;
   }
  
   //If an error occurs, show it on the panel
   catch(e){
    app.add(app.createLabel('Error occured: '+e));
    return app;   }     
  

  }