How to write an if/and statement in google apps sc

Question

I am trying to write an if/and statement based on two different drop down lists. Is it possible to write something with the logic below? The "if &&" statement does not work properly, but will work just fine with a single "if" statement. I understand the is a bit of code, but this is the only way I can show exactly what is happening.

    function doGet(e) {
  var app = UiApp.createApplication();

  var containerSizeList = app.createListBox().setId('containerSizeList').setName('containerSizeList');
  containerSizeList.addItem("20ft Long");
  containerSizeList.addItem("40ft Long");

  var loadingStyleList = app.createListBox().setId('loadingStyleList').setName('loadingStyleList');
  loadingStyleList.addItem("On Pallets");
  loadingStyleList.addItem("Floor Loaded");

    var tenPalletPanel = app.createHorizontalPanel().setId('tenPalletPanel').setVisible(true);
    var tenPalletLabel = app.createLabel('10 Pallets Available').setId('tenPalletLabel');
    var twentyPalletPanel = app.createHorizontalPanel().setId('twentyPalletPanel').setVisible(false);
    var twentyPalletLabel = app.createLabel('20 Pallets Available').setId('twentyPalletLabel');
    var loadingNotePanel = app.createHorizontalPanel().setId('loadingNotePanel').setVisible(false);
    var loadingNoteLabel = app.createLabel('Note: Only certain products may be floor loaded')
    .setId('loadingNoteLabel');

    var containerGrid = app.createGrid(1, 2);
    containerGrid.setWidget(0, 0, containerSizeList);
    containerGrid.setWidget(0, 1, loadingStyleList);

    var handlerJ = app.createServerClickHandler('palletChangeMe'); 
    containerSizeList.addChangeHandler(handlerJ);
    loadingStyleList.addChangeHandler(handlerJ);
    handlerJ.addCallbackElement(containerGrid);       

  app.add(containerGrid);
  app.add(tenPalletPanel);
  tenPalletPanel.add(tenPalletLabel);
  app.add(twentyPalletPanel);
  twentyPalletPanel.add(twentyPalletLabel);
  app.add(loadingNotePanel);
  loadingNotePanel.add(loadingNoteLabel);

  return app;
}

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

  if (e.parameter.containerSizeList == "40ft Long" && e.parameter.loadingStyleList == "On Pallets"){
    app.getElementById('tenPalletPanel').setVisible(false);
    app.getElementById('twentyPalletPanel').setVisible(true);
    app.getElementById('loadingNotePanel').setVisible(false);
}

  return app;
}

Answer 1

Instead of:

if (e.parameter.containerSizeList == "20ft Long"){
  and if (e.parameter.loadingStyleList == "On Pallets"){

Should be:

if (e.parameter.containerSizeList == "20ft Long" && e.parameter.loadingStyleList == "On Pallets"){

Note: && means logical AND. Read more about logical operators at MDN.

and you need to remove last } in each if statement, so final code would be like:

if (e.parameter.containerSizeList == "20ft Long" && e.parameter.loadingStyleList == "On Pallets"){
    app.getElementById('tenPalletPanel').setVisible(true);
    app.getElementById('twentyPalletPanel').setVisible(false);
}

if (e.parameter.containerSizeList == "40ft Long" && e.parameter.loadingStyleList == "On Pallets"){
    app.getElementById('tenPalletPanel').setVisible(false);
    app.getElementById('twentyPalletPanel').setVisible(true);
}