CODEWITHSUNDEEP
javascriptjquery
user1683645
user1683645

Reputation: 1579

Converting string to number in javascript/jQuery

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

Upvotes: 90

Views: 421864

Answers (9)

Ares
Ares

Reputation: 101

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

Upvotes: 0

YoJey Thilipan
YoJey Thilipan

Reputation: 687

var string = 123 (is string),

parseInt(parameter is string);

var string = '123';

var int= parseInt(string );

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

Upvotes: 7

cuixiping
cuixiping

Reputation: 25371

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

Upvotes: 12

expoz
expoz

Reputation: 89

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

Upvotes: 8

Gandom
Gandom

Reputation: 63

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

sample:

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

alert(typeof(votevalue));

Upvotes: 4

Shahar
Shahar

Reputation: 2347

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

Upvotes: 33

Anton
Anton

Reputation: 32581

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

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

DEMO

Upvotes: 60

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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.

Upvotes: 5

Rory McCrossan
Rory McCrossan

Reputation: 337550

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.

Upvotes: 113

Related Questions