CODEWITHSUNDEEP
javascriptjquerysyntax-error
Richard Goodman
Richard Goodman

Reputation: 101

JS - Uncaught SyntaxError: Unexpected Token

Good morning guys,

I decided to start learning JavaScript this weekend and am now stuck at the first hurdle. I have tried googling / researching the reason for this error and, as far as I can see, everything is formatted correctly. Are you able to help? The code is designed to make an arrow shaped button, made from 2 small divs in a container, on my webpage glow when hovered over.

$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
    $bartop = $('.toggle-button.menu-bar-top'),
    $barbottom = $('.toggle-button.menu-bar-bottom'),


$toggleButton.hover(function() {
    $bartop.css("box-shadow", "0 0 10px 1px #fff");
    $barbottom.css("box-shadow", "0 0 10px 1px #fff");
}, function() {
    $bartop.css("box-shadow", "0");
    $barbottom.css("box-shadow", "0");
});
});

I have added "box-shadow: 0;" to the .toggle-button .menu-bar-top and .toggle-button .menu-bar-bottom css classes, but I suspect it is something to do with my JS code. I am working in Chrome v55. Any help with this would be greatly appreciated!

Upvotes: 3

Views: 23310

Answers (3)

Jspdown
Jspdown

Reputation: 434

You have a , at the end of line 4. So the Uncaught SyntaxError: Unexpected token . error is due to $toggleButton.hover.

For your browser you are still declaring a new variable but you can use . in variable names.

To fix your problem just replace the , by a ; in line 4:

$(document).ready(function() {
  var $toggleButton = $('.toggle-button'),
      $bartop = $('.toggle-button.menu-bar-top'),
      $barbottom = $('.toggle-button.menu-bar-bottom');


  $toggleButton.hover(function() {
    $bartop.css("box-shadow", "0 0 10px 1px #fff");
    $barbottom.css("box-shadow", "0 0 10px 1px #fff");
  }, function() {
    $bartop.css("box-shadow", "0");
    $barbottom.css("box-shadow", "0");
  });
});

Upvotes: 4

SpenceUK
SpenceUK

Reputation: 11

You have some commas at the end of your variable declarations that should be semi colons ';' and some missing var keywords from the beginning of you variable declarations.

$(document).ready(function() {
     var $toggleButton = $('.toggle-button');

  var $bartop = $('.toggle-button.menu-bar-top');   var $barbottom = $('.toggle-button.menu-bar-bottom');

     $toggleButton.hover(function() {
          $bartop.css("box-shadow", "0 0 10px 1px #fff");
          $barbottom.css("box-shadow", "0 0 10px 1px #fff");
      }, function() {
          $bartop.css("box-shadow", "0");
          $barbottom.css("box-shadow", "0");
      });
});

Upvotes: 0

prasad
prasad

Reputation: 196

It's giving you syntax error as you have used comma at the end in following statement

$barbottom = $('.toggle-button.menu-bar-bottom'),

Because of the comma, javascript is considering $toggleButton as variable declaration as it's on the next line. And it is already declared at the top, so javascript is throwing syntax error, that it is already declared. Remove comma and use semicolon ;.

Upvotes: 1

Related Questions