CODEWITHSUNDEEP
javascriptjquery
Bruno Oyama
Bruno Oyama

Reputation: 15

SyntaxError: expected expression, got keyword 'if'

I have a problem here and if you guys could help me I'll be glad for it. So I want to hide a button "changeOrderUp" when it's in the first row and want the same with "changeOrderDown" button, when it founds in the last row. But FireBug returns this error: "SyntaxError: expected expression, got keyword 'if'", and I couldn't identify the reason. Please, help me!

Here is my js code: 

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){
    $('<tr><td class="ordem-pergunta-'+ordem+'">'+ordem+'</td> \
    <td class="ds-pergunta-'+ordem+'">'+data.var_pergunta[ordem - 1].ds_pergunta+'</td> \
    <td class="cd-pergunta-'+ordem+' hide">'+data.var_pergunta[ordem - 1].cd_pergunta+'</td> \
    <td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary '+if(ordem == 1){ document.write('hide');}+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+if(ordem == (data.var_pergunta).length)){ document.write('hide');}+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-ordem-pergunta');
                        }

Upvotes: 0

Views: 11217

Answers (2)

ssube
ssube

Reputation: 48287

Javascript does not allow inline if conditionals. If you need inline conditions, you should use the ternary operator, which behaves very much like an if block.

On top of that, you shouldn't be using document.write. It won't return a string for concatenation, but will erase the document and write just that string to the page.

You should replace each instance of

if(ordem == 1){ document.write('hide');}

with something like

(ordem === 1 ? 'hide' : '')

This will:

  1. Compare ordem to 1, strictly (=== is more strict than ==)
  2. Return 'hide' if the comparison was truthy
  3. Return an empty string otherwise

You can also simplify your code by placing a + at the end of each line, rather than escaping the newline. Using an escape like that is somewhat more difficult to read.

All together, I would refactor that snippet to be:

for (var ordem = data.var_pergunta.length; ordem >= 1; --ordem){
  $('<tr><td class="ordem-pergunta-' + ordem + '">' + ordem + '</td>' +
    '<td class="ds-pergunta-'+ordem+'">' +
      data.var_pergunta[ordem - 1].ds_pergunta +
    '</td>' +
    '<td class="cd-pergunta-'+ordem+' hide">' +
      data.var_pergunta[ordem - 1].cd_pergunta +
    '</td>' +
    '<td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary ' +
      (ordem === 1 ? 'hide' : '') +
    '" type="button"><i class="fa fa-angle-up"></i></button>' +
    '<button id="'+ordem+'" class="btn-change-order-down btn btn-info ' +
      (ordem === data.var_pergunta.length ? 'hide' : '') +
    '" type="button"><i class="fa fa-angle-down"></i></button>' +
    '</td></tr>').insertAfter('.tr-ordem-pergunta');
}

With a string that long, you may be better off looking into using a real templating library like Handlebars.js. Written as a template, your string could become:

<tr>
  <td class="ordem-pergunta-{{ordem}}">{{ordem}}</td>
  <td class="ds-pergunta-{{ordem}}">{{prev_ordem.ds_pergunta}}</td>
  <td class="cd-pergunta-{{ordem}} hide">{{prev_ordem.cd_pergunta}}</td>
  <td>
    <button id="{{ordem}}" class="btn-change-order-up btn btn-primary {{#if first_ordem}}hide{{/if}}" type="button">
      <i class="fa fa-angle-up"></i>
    </button>
    <button id="{{ordem}}" class="btn-change-order-down btn btn-info {{#if last_ordem}}hide{{/if}}" type="button">
      <i class="fa fa-angle-down"></i>
    </button>
  </td>
</tr>

and you would render it as:

template({
  ordem: ordem,
  prev_ordem: data.var_pergunta[ordem - 1]
  first_ordem: ordem === 1,
  last_ordem: order === data.var_pergunta.length
});

Upvotes: 5

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

try this. store your condition value in a variable and print it.

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){
if(ordem == 1){ var val = document.write('hide'); }
if(ordem == (data.var_pergunta).length)){ var another = document.write('hide');}
$('<tr><td class="ordem-pergunta-'+ordem+'">'+ordem+'</td> \
<td class="ds-pergunta-'+ordem+'">'+data.var_pergunta[ordem - 1].ds_pergunta+'</td> \
<td class="cd-pergunta-'+ordem+' hide">'+data.var_pergunta[ordem - 1].cd_pergunta+'</td> \
<td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary '+val+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+another+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-ordem-pergunta');
                        }

Upvotes: 0

Related Questions