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 :)
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 :)
Share asked Jun 15, 2011 at 20:38 alexalex 791 gold badge3 silver badges4 bronze badges 3- Are you using jQuery? I'm guessing you are by the syntax. – Ryan Doherty Commented Jun 15, 2011 at 20:41
- 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 remend switching. – brymck Commented Jun 15, 2011 at 20:46
- THank you everyone, with your help I got it to work <3 – alex Commented Jun 15, 2011 at 21:55
3 Answers
Reset to default 4Try 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.
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);'
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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/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./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 remended as this doesn't separate markup from behaviour but it still works)
<div onclick="$('#test').slideDown(800);">close it</div>