Javascript - SyntaxError: Unexpected token }

Question

When I try to make <div id="test">this should go down</div> go down with:

<div onclick="(".test").slideDown(800);">close it</div>

I get this error everytime i click 'close it'

 SyntaxError: Unexpected token }

Please let me know, what I'm doing wrong. Thanks :)

Just as a note, I'm assuming you're writing this in Notepad, as virtually everything else offers syntax highlighting. With this, you should immediately notice something weird within your quotes using something like Notepad++, vim or even the Stack Overflow interface. I'd definitely recommend switching. — brymck
– brymck, Commented Jun 15, 2011 at 20:46

Darin Dimitrov · Accepted Answer · 2011-06-15 20:40:17Z

4

Try like this:

<div onclick="$('.test').slideDown(800);">close it</div>

or even better as it seems that you are using jquery:

<div id="close">close it</div>

and in a separate javascript file:

$('#close').click(function() {
    $('.test').slideDown(800);
});

See how cleaner this is? You no longer need to mix markup with javascript and have problems as the one you are encountering currently.

answered Jun 15, 2011 at 20:40

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darin Dimitrov Over a year ago

Any reason for the downvote? Please leave a comment when downvoting explaining why you think this answer is wrong.

Darin Dimitrov Over a year ago

@andyb, why .test should be #test? It could be a class selector, couldn't it?

andyb Over a year ago

It could be but the question has <div id="test">

Justin Niessner · Accepted Answer · 2011-06-15 20:40:47Z

2

Change on of the uses of double quotes (and I'm guessing you're using jQuery so you'll also need to add the $ shortcut (or full jQuery call):

onclick="$('.test').slideDown(800);"

// or

onclick='$(".test").slideDown(800);'

answered Jun 15, 2011 at 20:40

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Comments

andyb · Accepted Answer · 2011-06-15 20:59:29Z

You are using an ID selector for the <div id="test"> but trying to use a class selector to animate the <div> with $(.test) which will never match. However your code is also has bad quotes which is causing the SyntaxError, so to fix everything one of the following should help :-)

HTML:

<div id="closeIt">close it</div>

JavaScript:

$('#closeIt').click(function() {
    $('#test').slideDown(800);
});

or Complete example (with separate bound function):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#closeIt').click(function() {
                $('#test').slideDown(800);
            });
        });
    </script>
    <style type="text/css">
        #test {
            display:none;
        }
    </style>
</head>
<body>
<div>
<div id="closeIt">close it</div>
<div id="test">this should go down</div>
</div>
</body>
</html>

or inline onclick (not recommended as this doesn't separate markup from behaviour but it still works)

<div onclick="$('#test').slideDown(800);">close it</div>

Collectives™ on Stack Overflow

Javascript - SyntaxError: Unexpected token }

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related