JS - Uncaught SyntaxError: Unexpected Token

Question

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!

Solution 1

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

Solution 2

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

Comments

[Richard Goodman]

Thank you for the fast reply! You are right, that seems to stop the error but isn't having the effect on the arrow I was hoping for. I'm sure that is because I am likely targeting the wrong selectors for the effect I want, but this is officially answered! Thanks for your patience with a newb, and the extra detail you added for me