Jquery does not execute because of syntax

Question

Jquery does not execute because of syntax

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I looked at my syntax and at first it's true:

 $(document).ready(function(){

    $('input[placeholder], textarea[placeholder]').focus(function(){
    if($(this).val()==$(this).attr('placeholder'))
        $(this).val('');
    }).blur(function(){
    if($(this).val()=='')
        $(this).val($(this).attr('placeholder'));
    });


    $( ".soluctionsBenefits" ).click(function() {     
        $( ".soluctionsBenefitsShow" ).show();
        $( ".soluctionsDescriptionShow" ).hide();
        $( ".soluctionsApplicationsShow" ).hide();
    });
}

However, it points to an error in the console:

Thatindicatesthefollowinglineinmycode:

jquery syntax-error

asked by anonymous 13.04.2015 / 09:43

2 answers

2

It's because a ) is really missing, which is in the end to close the document.ready clause:

 $(document).ready(function(){

    $('input[placeholder], textarea[placeholder]').focus(function(){
    if($(this).val()==$(this).attr('placeholder'))
        $(this).val('');
    }).blur(function(){
    if($(this).val()=='')
        $(this).val($(this).attr('placeholder'));
    });

    $( ".soluctionsBenefits" ).click(function() {     
        $( ".soluctionsBenefitsShow" ).show();
        $( ".soluctionsDescriptionShow" ).hide();
        $( ".soluctionsApplicationsShow" ).hide();
    });
}) // <---- AQUI

13.04.2015 / 10:58

Error StackOverflow How to invert the values of the main diagonal of a 5x5 matrix?

score 3 · Accepted Answer

If you notice the error:

SyntaxError: missing) after argument list

What translated is:

Syntax error: Missing ) after argument list

To understand, with the help of the indication of the line where the error occurred, you have to close the parentheses of the method .ready() , whose argument is given a function to execute after the DOM is available.

Rectified code

$(document).ready(function(){

    $('input[placeholder], textarea[placeholder]').focus(function(){
    if($(this).val()==$(this).attr('placeholder'))
        $(this).val('');
    }).blur(function(){
    if($(this).val()=='')
        $(this).val($(this).attr('placeholder'));
    });

    $( ".soluctionsBenefits" ).click(function() {     
        $( ".soluctionsBenefitsShow" ).show();
        $( ".soluctionsDescriptionShow" ).hide();
        $( ".soluctionsApplicationsShow" ).hide();
    });
}); // Faltava fechar os parênteses aqui

Optimization

Taking advantage of the answer, here's a hint to minimize interaction with the DOM because you make several calls to elements in methods .focus() and .blur() :

$(document).ready(function(){

  $('input[placeholder], textarea[placeholder]').focus(function(){

    // colocar elemento em cache para evitar andar sempre a procurar o mesmo
    var $this = $( this );  

    if ( $this.val()==$this.attr('placeholder') )
      $this.val('');

    }).blur(function(){

      var $this = $( this ); 

      if ( $this.val()=='' )
        $this.val( $this.attr('placeholder') );
    });

    $( ".soluctionsBenefits" ).click(function() {

      $( ".soluctionsBenefitsShow" ).show();

      // esconder vários elementos ao mesmo tempo
      $( ".soluctionsDescriptionShow, .soluctionsApplicationsShow" ).hide(); 
    });
});

Essentially, we've improved two things:

Avoid always looking for the element in .focus() or .blur() by caching it:

var $this = $(this);

Hide multiple elements at once by avoiding multiple lines of code for the same effect:

$( ".soluctionsDescriptionShow, .soluctionsApplicationsShow" ).hide();