Converting string to number in javascript/jQuery

Question

Been trying to convert the following to number:

<button class="btn btn-large btn-info" data-votevalue="1">
    <strong>1</strong>
</button>

var votevalue = parseInt($(this).data('votevalue'));

I've also tried Number() but I'm still getting NaN when checking the result. What am I doing wrong?

Here is the complete code:

<div class="span7" id="button-group">
    <div class="btn-group">
        <button class="btn btn-large btn-info" data-votevalue="1"><strong>1</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="2"><strong>2</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="3"><strong>3</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="4"><strong>4</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="5"><strong>5</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="6"><strong>6</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="7"><strong>7</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="8"><strong>8</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="9"><strong>9</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="10"><strong>10</strong></button>
    </div>
</div>

$('#button-group button').each(function() {
    $(this).click(function() {
        $(this).addClass('active');
        var votevalue = parseInt($(this).data('votevalue'));
        var filename = $('.mainimage').data('filename');
        var votes = parseInt($('.mainimage').data('numvotes'));
        var totalscore = parseInt($('.mainimage').data('totalscore'));
        $.ajax({
            type: 'POST',
            url: 'index.php/?category=vote',
            data: {
                "votevalue": votevalue,
                "filename": filename
            },
            success: function() {
                votes++;
                alert(votes);
                var average = ((totalscore + votevalue) / votes);
                $('#vote-incremenet').html(votes);
                $('#display-average').html(average);
                $('#display-average').show();
                $('#button-group button').each(function(){
                    $(this).unbind('click');
                });
            }
        }); // end ajax
    }); // end click
}); // end each

What you have will work fine, so I can only assume that this does not refer to what you expect. Also, don't forget the radix argument to parseInt! — James Allardice
– James Allardice, Commented Oct 11, 2012 at 12:31
do you want the value of the data-votevalue property or the text inside the <strong></strong> tags? — pythonian29033
– pythonian29033, Commented Oct 11, 2012 at 12:32

Rory McCrossan · Accepted Answer · 2012-10-11 12:35:04Z

113

It sounds like this in your code is not referring to your .btn element. Try referencing it explicitly with a selector:

var votevalue = parseInt($(".btn").data('votevalue'), 10);

Also, don't forget the radix.

answered Oct 11, 2012 at 12:35

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

2 Comments

user1683645 Over a year ago

I get the correct string when I dont try parsing the variable. So this referece to right object. I posted the complete code in my original post. Maybe you could take a look.

Rory McCrossan Over a year ago

The problem must lie elsewhere in your code then, because the parseInt(votevalue) section works fine: jsfiddle.net/fVJRL

Anton · Accepted Answer · 2013-12-17 09:00:32Z

60

You can use parseInt(string, radix) to convert string value to integer like this code below

var votevalue = parseInt($('button').data('votevalue'));

DEMO

edited Dec 17, 2013 at 9:00

answered Oct 11, 2012 at 12:32

Anton

32.6k5 gold badges47 silver badges54 bronze badges

2 Comments

PauAI Over a year ago

can't trust parseInt() tried "1,633" it returns "1".

bandito40 Over a year ago

Use parseFloat to convert string to float.

Shahar · Accepted Answer · 2014-03-13 09:13:48Z

33

Although this is an old post, I thought that a simple function can make the code more readable and keeps with jQuery chaining code-style:

String.prototype.toNum = function(){
    return parseInt(this, 10);
}

can be used with jQuery:

var padding_top = $('#some_div').css('padding-top'); //string: "10px"
var padding_top = $('#some_div').css('padding-top').toNum(); //number: 10`

or with any String object:

"123".toNum(); //123 (number)`

edited Mar 13, 2014 at 9:13

answered Feb 22, 2014 at 22:49

Shahar

2,3671 gold badge28 silver badges35 bronze badges

1 Comment

ronrun Over a year ago

I think your answer is excellent, the only good solution. parseInt or parseFloat doesn't work well If the value is empty "", then I still get NaN. However, I use your solution and add if(!$.isNumeric(this)){ this =0; }, solve everything.

cuixiping · Accepted Answer · 2017-05-20 10:04:55Z

13

For your case, just use:

var votevalue = +$(this).data('votevalue');

There are some ways to convert string to number in javascript.

The best way:

var str = "1";
var num = +str; //simple enough and work with both int and float

You also can:

var str = "1";
var num = Number(str); //without new. work with both int and float

or

var str = "1";
var num = parseInt(str,10); //for integer number
var num = parseFloat(str); //for float number

DON'T:

var str = "1";
var num = new Number(str);  //num will be an object. typeof num == 'object'

Use parseInt only for special case, for example

var str = "ff";
var num = parseInt(str,16); //255

var str = "0xff";
var num = parseInt(str); //255

answered May 20, 2017 at 10:04

cuixiping

25.7k9 gold badges88 silver badges94 bronze badges

Comments

twernt · Accepted Answer · 2016-01-29 15:01:42Z

8

You should just use "+" before $(this). That's going to convert the string to number, so:

var votevalue = +$(this).data('votevalue');

Oh and I recommend to use closest() method just in case :)

var votevalue = +$(this).closest('.btn-group').data('votevalue');

edited Jan 29, 2016 at 15:01

twernt

20.6k5 gold badges35 silver badges41 bronze badges

answered Jan 29, 2016 at 14:49

expoz

891 silver badge2 bronze badges

2 Comments

micstr Over a year ago

Welcome @expoz - note hit {} in the editor to format a code section, or use 4 spaces in front of code line. Plus you can use single quote ` around code to mark code or package commands e.g. closest(),

JackHasaKeyboard Over a year ago

I'm pretty sure that's just an exploitation of JavaScript's poor type management. That doesn't seem like a good idea.

YoJey Thilipan · Accepted Answer · 2018-06-02 07:33:26Z

7

var string = 123 (is string),

parseInt(parameter is string);

var string = '123';

var int= parseInt(string );

console.log(int);  //Output will be 123.

edited Jun 2, 2018 at 7:33

answered Jun 1, 2018 at 13:19

YoJey Thilipan

7079 silver badges10 bronze badges

2 Comments

Muhammad Over a year ago

add details to your answer ?

Heretic Monkey Over a year ago

Exactly the same as this answer, and this answer for that matter.

Christofer Eliasson · Accepted Answer · 2013-10-18 20:45:59Z

5

It sounds like this is referring to something else than you think. In what context are you using it?

The this keyword is usually only used within a callback function of an event-handler, when you loop over a set of elements, or similar. In that context it refers to a particular DOM-element, and can be used the way you do.

If you only want to access that particular button (outside any callback or loop) and don't have any other elements that use the btn-info class, you could do something like:

parseInt($(".btn-info").data('votevalue'), 10);

You could also assign the element an ID, and use that to select on, which is probably a safer way, if you want to be sure that only one element match your selector.

edited Oct 18, 2013 at 20:45

answered Oct 11, 2012 at 12:33

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Comments

Gandom · Accepted Answer · 2015-09-18 14:59:48Z

4

You can adding a + before the string without using parseInt and parseFloat and radix, Simply

sample:

var votevalue = +$('button').data('votevalue');

alert(typeof(votevalue));

edited Sep 18, 2015 at 14:59

answered Sep 18, 2015 at 14:51

Gandom

632 silver badges9 bronze badges

Comments

Ares · Accepted Answer · 2018-12-12 21:34:03Z

0

var votevalue = $.map($(this).data('votevalue'), Number);

answered Dec 12, 2018 at 21:34

Ares

1011 silver badge9 bronze badges

1 Comment

Enkode Over a year ago

it is recommended to provide more context to your answer. Review the guide on how to answer: stackoverflow.com/help/how-to-answer

Collectives™ on Stack Overflow

Converting string to number in javascript/jQuery

9 Answers 9

2 Comments

2 Comments

1 Comment

Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

2 Comments

1 Comment

Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related