NaN being returned on parseInt()

Question

http://jsfiddle.net/leongaban/fhhmLfab/

In the example above I have 3 buttons, orange, green and red.

On hover each reveals a [ - ] and a [ + ] button with a class of btn_action.

On click I'm trying to grab the numerical value from the target color button and then increment or decrement it by 1.

Currently I'm getting NaN on my parseInt function:

$('.btn_action').unbind('click').bind('click', function() {
    var type = $(this).data('type').toString();

    console.log(color);
    console.log(type);

    // this is returning NaN, it should be returning 1:
    var number = parseInt($('option_'+color).text(), 10);
    console.log(number);

    if (type === 'plus') {
        // number = number + 1;
        $('option_'+color).text(number + 1);
        console.log(number);
    }
});

Thoughts on where I'm going wrong?

Answer 1

You should use . for class

var number = parseInt($('.option_'+color).text(), 10);

But you should use unary + Generally more efficient than parseInt

var number = +$('.option_'+color).text();

Answer 2

You just need to update the jQuery selector for the option element. As Leon said.

Use $('.option_'+color).text() instead of $('option_'+color).text()

I amended the fiddle example while looking at it: https://jsfiddle.net/urkjzjsj/