jQuery syntax error - unexpected token

Question

I'm trying to debug and I keep getting a syntax error. I'm not sure what is going on with this. I'm trying to have it where if I click on an object which is attached to "$color_cell" it pushes the atrr("id") into the black_colors array.

Could someone help me with this? Thanks in advance.

<script src="jquery-1.6.2.js"></script>
<script type="text/javascript">

var ids = [];
var black_colors = [];
var blue_colors = [];
var brown_colors = [];
var gray_colors = [];
var green_colors = [];
var orange_colors = [];
var pink_colors = [];
var purple_colors = [];
var red_colors = [];
var teal_colors = [];
var white_colors = [];
var yellow_colors = [];


$(document).ready(function($) {


    $(".btnColor").click(function(){

        $(".color_cell").click(function(){

            if $(this).attr("id") == "black"{

            black_colors.push($(this).attr("id"));

    }

        });

    });

});

</script>
<br>
<br>
    <button type="button" class="btnColor" id="black">Black</button>&nbsp;
    <button type="button" class="btnColor" id="blue">Blue</button>&nbsp;
    <button type="button" class="btnColor" id="brown">Brown</button>&nbsp;
    <button type="button" class="btnColor" id="gray">Gray</button>&nbsp;
    <button type="button" class="btnColor" id="green">Green</button>&nbsp;
    <button type="button" class="btnColor" id="orange">Orange</button>&nbsp;
    <button type="button" class="btnColor" id="pink">Pink</button>&nbsp;
    <button type="button" class="btnColor" id="purple">Purple</button>&nbsp;
    <button type="button" class="btnColor" id="red">Red</button>&nbsp;
    <button type="button" class="btnColor" id="teal">Teal</button>&nbsp;
    <button type="button" class="btnColor" id="white">White</button>&nbsp;
    <button type="button" class="btnColor" id="yellow">Yellow</button>&nbsp;

vector · Accepted Answer · 2011-08-09 16:47:59Z

3

instead of : if $(this).attr("id") == "black"

if ($(this).attr("id") == "black")

answered Aug 9, 2011 at 16:47

vector

7,6168 gold badges56 silver badges81 bronze badges

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

Comments

Darin Dimitrov · Accepted Answer · 2011-08-09 16:52:01Z

1

There are many errors in your code.

<script src="jquery-1.6.2.js"></script>

should become:

<script type="text/javascript" src="jquery-1.6.2.js"></script>

and:

$(document).ready(function($) {

should become:

$(document).ready(function() {

and:

if $(this).attr("id") == "black"{

should become:

if ($(this).attr("id") == "black") {

And also you have nested the two .click() handlers which is not correct.

so that finally you have:

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">

var ids = [];
var black_colors = [];
var blue_colors = [];
var brown_colors = [];
var gray_colors = [];
var green_colors = [];
var orange_colors = [];
var pink_colors = [];
var purple_colors = [];
var red_colors = [];
var teal_colors = [];
var white_colors = [];
var yellow_colors = [];

$(document).ready(function() {
    $(".color_cell").click(function() {
        // Can't see any color_cell class in your markup
        // so no idea what you want to do if the DOM element with it is clicked
    });

    $(".btnColor").click(function() {
        if ($(this).attr("id") == "black") {
            black_colors.push($(this).attr("id"));
        }
    });
});
</script>

edited Aug 9, 2011 at 16:52

answered Aug 9, 2011 at 16:46

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

1 Comment

Felix Kling Over a year ago

Only the last one is a real error. Default scripting language in HTML5 is JavaScript (ok, we don't know if it is HTML5) and the jQuery passes a reference to itself as first argument to the ready handler.

RickyA · Accepted Answer · 2014-05-15 13:52:50Z

1

I don't think your javascript syntax is quite right. Try this:

$(document).ready(function($) {
    $(".btnColor").click(function(){
        $(".color_cell").click(function(){
            if ($(this).attr("id") == "black") {
               black_colors.push($(this).attr("id"));
             }
        });
    });
});

edited May 15, 2014 at 13:52

RickyA

16.1k6 gold badges77 silver badges97 bronze badges

answered Aug 9, 2011 at 16:46

Justin Beckwith

7,8761 gold badge38 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery syntax error - unexpected token

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related