CODEWITHSUNDEEP
javascript
alex
alex

Reputation: 79

Javascript - SyntaxError: Unexpected token }

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 :)

Upvotes: 1

Views: 4184

Answers (3)

andyb
andyb

Reputation: 43823

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>

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245499

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);'

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1039508

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.

Upvotes: 4

Related Questions