Uncaught SyntaxError: Unexpected token if

Question

I create WordPress ShortCode tab and write this code to collect the shortcode

jQuery('body').on('click', '#tapSubmit',function(){
    var shortcode = '[tapWrap]';
    jQuery('.tapForm').each(function(){
        var title = jQuery('.Title').val(),
            content = jQuery('.Content').val(),
            shortcode += '[tap ';
        if(title){shortcode += 'title="'+title+'"';}
        shortcode += ']';
        if(content){shortcode += ''+content+'';}
        shortcode += '[/tap]';
    });
    shortcode += '[/tapWrap]';

    tinyMCE.activeEditor.execCommand('mceInsertContent', false, shortcode);
});

and i get this error

Uncaught SyntaxError: Unexpected token if 

and i try the code in http://jsfiddle.net/ and i got this error in the line which have this code

shortcode += '[tap ';
Expected an assignment or function call and instead saw an expression.

how to fix it ?

Answer 1

When you have

var title = jQuery('.Title').val(),
        content = jQuery('.Content').val(),
        shortcode += '[tap ';

you are defining new variables in that chain but shortcode is already defined, so you are creating a new variable in this scope. Being a new variable you cannot use +=. Anyway I think you just want to use this:

var title = jQuery('.Title').val(),
    content = jQuery('.Content').val(); // changed the last comma with semicolon
shortcode += '[tap ';

To read:
About scope
About var

Answer 2

Problem is coming in here

var title     = jQuery('.Title').val(),
    content   = jQuery('.Content').val(),
    shortcode += '[tap ';

shortcode is already a var defined above. You can't use += in a var expression

Just change this to

var title     = jQuery('.Title').val(),
    content   = jQuery('.Content').val(); // note the semicolon here

shortcode += '[tap ';

---

I think you're also going to run into some nesting issue. Instead of calling jQuery('.Content').val() for each iteration of the loop, I think you're looking for something more like $(this).find('.Content').val() or $('.Content', this). This will find the relevant .Content input in the scope of a given .tapForm.

I'm thinking something like this, but it's just an idea

jQuery('body').on('click', '#tapSubmit', function(){

  function title(context) {
    var value = jQuery(".Title", context).val();
    return value ? 'title="' + value + '"' : '';
  }

  function content(context) {
    var value = jQuery(".Content", context).val();
    return value || '';
  }

  var taps = jQuery('.tapForm').map(function(){
    return '[tap ' + title(this) + ']' + content(this) + '[/tap]';
  }).join();

  tinyMCE.activeEditor.execCommand('mceInsertContent', false, '[tapWrap]' + taps + '[/tapWrap]');  
});