SyntaxError: Unexpected token }

Question

the code worked until line 48, after which it no longer worked. I would like to implement the switch on the "move" button on line 50-62, but this gave me the error Error: Uncaught SyntaxError: Unexpected token }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="1.js"></script>
  <title>Prova Jquery</title>
  <!-- Fogli di stile -->
 <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <body>

  <div class="container" id="effetti">

    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>

   <a href="https://www.google.it/">vai su google</a> 
   <button type="button "id="nascondi-immagine">Nascondi </button> 
   <button type="button" id="mostra-immagine">Mostra </button>   
   <button type="button" id="sposta-immagine">Sposta </button>   


   <p><img src="blu.jpg" \></p>




  </div>

</body>

</html>

file 1.js :

$(function(){
  $("#effetti")
    .fadeIn(12000);//effetto opacita in 12 secondi 

  $("#effetti")//sul DIV che si chiama effetti
    .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
      mouseover: function(){//creo una function anonima
        console.log("MOUSE OVER");
      }, //sotto scrivo un'altra funzione sempre ANONIMA

      click: function(){//tutte le volte che scrivo "nome-evento" e due punti dentro gli passo un oggetto
        console.log("CLICK"); 

      }

    }); 

  $("#nascondi-immagine")
    .on({
      click:function(){//quando faccio click
        $("img").hide();//devi nascondere l'immagine 
      }
    });

  $("#mostra-immagine")
    .on({
      click:function(){
        $("img").fadeIn(3000);//immagine deve comparire in 3'
      }
    });

  //prEventDefault serve a prevenire il comportamento di default del dom html
  $("#effetti a")//sul DIV che si chiama effetti SELEZIONO gli elementi a
    .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
      click:function(e){//passo un parametro "e" che corrisponde all'elemento "a" in pratica
        e.preventDefault();
      }

    });


  $(window)
    .on("load", function(){
      $("#effetti")
        .css({
          "margin-top":10%
        });
    });

    $(window)//l'oggetto window di js
      .on("load",function(){//scrivo load ed apro un function anonima
        $("#sposta-immagine")
          .on({
            click:function(){//al compimento di questa azione ovvero click su bottone
              $("effetti")//sul DIV che si chiama effetti
                .css({
                  "background":"red",
                  "margin-left":10%
                });
            }
          });
      });

});

when I update the 1.js file even if I delete the function from line 50-62 it continues to give me the usual error. in the sense the google chrome console always gives me the old error on that code even if that code has been deleted

Your `` closing tag is missing. You can use this https://jsfiddle.net/ check the color of your tag or syntax. If there's an error your code will be highlighted. — Anderson Koh, May 25 '19 at 07:09

t.niese · Answer 1 · 2019-05-25T08:28:46.480

0

In JavaScript (and most other languages) 10% does not mean 10 percent.

It is the beginning of an expression (Arithmetic operators: Remainder (%)) and expects an operand after %, but in your code it is followed by a } ("margin-top":10% }) and that's a syntax error.

The value has to be encapsulated into a string '10%'.

And as of that it has to be:

$("#effetti")
  .css({
    "margin-top": "10%"
  });

and (with corrected selector effetti has to be #effetti)

$("#effetti") //sul DIV che si chiama effetti
  .css({
    "background": "red",
    "margin-left": "10%"
  });

edited May 25 '19 at 08:28

answered May 25 '19 at 07:21

t.niese

39,256
9
74
101

Solution should resolve the user problem...Complete solution would always welcome. try jsfiddle or any other tools to provide/add your explanatery example. here I can see the selector is not correct and `background` should be `background-color` as question prospective. – Vikash Pathak May 25 '19 at 07:56
@VikashPathakt the question is about the syntax error nothing else. StackOverflow is a Q&A platform that is about specific problems (where you should ask one question at a time). It is great to solve other problems too, in addition to the one that is asked, but that's not the point of the Q&A platform. – t.niese May 25 '19 at 08:07
@VikashPathak `"background": "red"` is perfectly valid. – t.niese May 25 '19 at 08:29
let's close the debate... I leaned few new things today. Thanks! – Vikash Pathak May 25 '19 at 08:31
As we could able to help User that is the most important thing. :+1 – Vikash Pathak May 25 '19 at 08:33

Vikash Pathak · Accepted Answer · 2019-05-25T08:18:42.740

0

Here is the mistake I found

$(window)//l'oggetto window di js
      .on("load",function(){//scrivo load ed apro un function anonima
        $("#sposta-immagine")
          .on({
            click:function(){//al compimento di questa azione ovvero click su bottone
              $("effetti")//sul DIV che si chiama effetti
                .css({
                  "background":"red",
                  "margin-left":10%
                });
            }
          });
      });

$("effetti") selecter is not correct $("#effetti")
"background" I think, would be `"background-color"
10% should be marked as string "10%".
You can use single $(window).on("load", function() { ... }); to wrap multiple code context. just for the best practice.

Here is the fixed code:

$(function() {

 $("#effetti")
        .fadeIn(12000); //effetto opacita in 12 secondi 

    $("#effetti") //sul DIV che si chiama effetti
        .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
            mouseover: function() { //creo una function anonima
                console.log("MOUSE OVER");
            }, //sotto scrivo un'altra funzione sempre ANONIMA

            click: function() { //tutte le volte che scrivo "nome-evento" e due punti dentro gli passo un oggetto
                console.log("CLICK");

            }

        });

    $("#nascondi-immagine")
        .on({
            click: function() { //quando faccio click
                $("img").hide(); //devi nascondere l'immagine 
            }
        });

    $("#mostra-immagine")
        .on({
            click: function() {
                $("img").fadeIn(3000); //immagine deve comparire in 3'
            }
        });

    //prEventDefault serve a prevenire il comportamento di default del dom html
    $("#effetti a") //sul DIV che si chiama effetti SELEZIONO gli elementi a
        .on({ //permette di fare qualcosa intercettando un evento (click, mouseover, onclick..)
            click: function(e) { //passo un parametro "e" che corrisponde all'elemento "a" in pratica
                e.preventDefault();
            }

        });


    $(window)
        .on("load", function() {
            $("#effetti")
                .css({
                    "margin-top": "10px"
                });


            $("#sposta-immagine").on("click", function() { //al compimento di questa azione ovvero click su bottone
                $("#effetti") //sul DIV che si chiama effetti
                    .css({ "background-color": "red", "margin-left": "10px" });
            });

        });
});

Find the working example here.

https://playcode.io/325382?tabs=console&index.html&output

edited May 25 '19 at 08:18

answered May 25 '19 at 07:27

Vikash Pathak

3,444
1
18
32

thank you very much, the only thing that does not work as I would like is the function on line 50-62. if clicked on "SPOSTA" does not work. in short, the css background rules are not applied ":" red "," margin-left ":" 10% "on the button – Gianmarco Gagliardi May 25 '19 at 07:36
@t.niese the question context was not improving the code or providing the solutions for pixel... the user was having some code-mistake (syntax related issue). If it need improvements you can comment as suggestion instead of downvote the solution. – Vikash Pathak May 25 '19 at 07:36
@GianmarcoGagliardi try the solution now. I have updated the fix for that. – Vikash Pathak May 25 '19 at 07:38
it works you solved my problem. thank you so much – Gianmarco Gagliardi May 25 '19 at 07:41
@t.niese here the User having much more syntax related issue in code that needs to be improved. You can either update the solutions with suggested edits :) Always downvote a solutions is not a good practice. – Vikash Pathak May 25 '19 at 07:43
You are welcome @GianmarcoGagliardi can you please mark solution as accepted. – Vikash Pathak May 25 '19 at 07:43
some things I didn't check out in your solution: $("#sposta-immagine").on("click", function() { $("#effetti") .css({ "background-color": "red", "margin-left": "10px" }); }); because the windows object disappeared and because the windows object disappeared and on.click: ? – Gianmarco Gagliardi May 25 '19 at 07:45
@GianmarcoGagliardi sorry didn't get you `some things I didn't check out in your solution:` – Vikash Pathak May 25 '19 at 07:47
@GianmarcoGagliardi I have updated the solution with what edit required. Please confirm now. – Vikash Pathak May 25 '19 at 07:53
`Here is the mistake I found` does this helpful? – Vikash Pathak May 25 '19 at 07:58
@GianmarcoGagliardi if you see the solution carefully the `$(window) .on("load", function() {` is there... just removed the duplicated onload.. you can wrap as much as code in single window.onload block. No need to include window.onload for each conde context. – Vikash Pathak May 25 '19 at 08:01
@GianmarcoGagliardi did you get your ans? – Vikash Pathak May 25 '19 at 08:04
1

The answer now contains some of the necessary explanations. But why should `.on({ click: function(){` be invalid and be written as `$("#sposta-immagine").on("click", function() {` ? Passing an object to `on` with the event name(s) as property is perfectly valid syntax. – t.niese May 25 '19 at 08:05
OK thanks to all, I solved it like this:$(window)//l'oggetto window di js .on("load",function(){//scrivo load ed apro un function anonima $("#sposta-immagine") .on({ click:function(){//al compimento di questa azione ovvero click su bottone $("#effetti")//sul DIV che si chiama effetti .css({ "background-color":"red", "margin-left":"10%" }); } }); }); – Gianmarco Gagliardi May 25 '19 at 08:21
Cool @GianmarcoGagliardi it's my pleasure to get your problem resolved. Please mark solution as accepted. – Vikash Pathak May 25 '19 at 08:23
Also a great help from @t.niese can't ignored. Thanks :+1 – Vikash Pathak May 25 '19 at 08:24
@GianmarcoGagliardi please mark this if it helps to prepare your solution. – Vikash Pathak May 28 '19 at 13:13

SyntaxError: Unexpected token }

2 Answers2