Error: anticipated expression, received keyword 'if'

Question

Error: anticipated expression, received keyword 'if'

I'm facing an issue that I could really use some assistance with. I am trying to hide the "changeOrderUp" button when it's in the first row, and similarly, I want to hide the "changeOrderDown" button when it's in the last row. However, FireBug is throwing an error: "SyntaxError: expected expression, got keyword 'if'". I am struggling to figure out the cause of this error. Any help would be greatly appreciated!

Below is my javascript code snippet:

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');
                        }

javascript jquery

Answer 1

Answer №1

When working with Javascript, it's important to note that inline if conditionals are not allowed. Instead, you should utilize the ternary operator, which functions similarly to an if block.

Avoid using document.write as it does not return a string for concatenation but overwrites the document and displays only the specified string on the page.

In place of

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

You can use something like

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

This approach:

Compares ordem strictly to 1 (=== is stricter than ==)
Returns 'hide' if the comparison is true
Returns an empty string otherwise

To simplify your code further, consider adding a + at the end of each line instead of escaping the newline. Using an escape character makes the code less readable.

For consolidation, you could refactor the snippet as follows:

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');
}

If your string is lengthy, consider utilizing a templating library such as Handlebars.js. By converting your string into a template, it could look like this:

<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>

To render this template:

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

Answer 2

When working with Javascript, it's important to note that inline if conditionals are not allowed. Instead, you should utilize the ternary operator, which functions similarly to an if block.

Avoid using document.write as it does not return a string for concatenation but overwrites the document and displays only the specified string on the page.

In place of

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

You can use something like

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

This approach:

Compares ordem strictly to 1 (=== is stricter than ==)
Returns 'hide' if the comparison is true
Returns an empty string otherwise

To simplify your code further, consider adding a + at the end of each line instead of escaping the newline. Using an escape character makes the code less readable.

For consolidation, you could refactor the snippet as follows:

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');
}

If your string is lengthy, consider utilizing a templating library such as Handlebars.js. By converting your string into a template, it could look like this:

<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>

To render this template:

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

Answer 3

Answer №2

Give this a shot. Save the condition value in a variable and display it.

for(var order = (data.question_var).length; order >= 1 ; order--){
if(order == 1){ var value = document.write('hide'); }
if(order == (data.question_var).length)){ var next = document.write('hide');}
$('<tr><td class="order-question-'+order+'">'+order+'</td> \
<td class="description-question-'+order+'">'+data.question_var[order - 1].question_description+'</td> \
<td class="code-question-'+order+' hide">'+data.question_var[order - 1].question_code+'</td> \
<td><button id="'+order+'" class="btn-change-order-up btn btn-primary '+value+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+order+'" class="btn-change-order-down btn btn-info '+next+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-order-question');
                        }

Answer 4

Give this a shot. Save the condition value in a variable and display it.

for(var order = (data.question_var).length; order >= 1 ; order--){
if(order == 1){ var value = document.write('hide'); }
if(order == (data.question_var).length)){ var next = document.write('hide');}
$('<tr><td class="order-question-'+order+'">'+order+'</td> \
<td class="description-question-'+order+'">'+data.question_var[order - 1].question_description+'</td> \
<td class="code-question-'+order+' hide">'+data.question_var[order - 1].question_code+'</td> \
<td><button id="'+order+'" class="btn-change-order-up btn btn-primary '+value+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+order+'" class="btn-change-order-down btn btn-info '+next+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-order-question');
                        }

Error: anticipated expression, received keyword 'if'

Answer №1

Answer №2

Similar questions

Upon page reload in Nuxt.js middleware, Firebase authentication is returning as null

Angular prevents the page from reloading when using `$window.location`

Retrieve the thousand separator for numbers using Angular in various languages

What is the process for enabling HLS.js to retrieve data from the server side?

Dealing with a 404 error when using the JQuery AJAX PUT method in ASP.NET MVC

Error message: It seems the spatial reference for this ESRI object is missing

Tips for sending data through AJAX before the browser is about to close

JavaScript keydown event for rotating images

Sending information to a jQuery UI Dialog

Ways to track all requests completed in Nuxt 3

"Error message: PHP throwing an undefined index error when using

I attempted to activate the hover effect on a DOM element using JavaScript, but was unsuccessful. It appears that achieving this is not possible. However, I am curious as to how Chrome is able to

Is there a way to make a button on a single div only affect that specific div

Enhance the functionality of bindings in Rails 4 by implementing turbolinks

AngularJS: ng-show causing flickering issue upon page refresh

AngularJS mdDialog not supporting Tinymce functionality

The list marquee in HTML, JS, and CSS is not being properly rendered on

What is the best way to deploy a Vue Webpack application using Sails.js?

Tips on preventing users from navigating backwards in a React Redux application

What could be causing the issues with SSL certificates when using Node.js/Express-TypeScript?