How to convert data attribute value to integer for in javascript?

Question

I've been searching everywhere for this and can't seem to find an anwser that works. What i have is a slider with arrows and buttons, when an arrow or button is clicked the function grabs the data-cs attribute which it uses to to determine the next slide.

the html

<div id="arrowleft" class="sliderbtns flip" data-sc="prev"></div>
<div id="arrowright" class="sliderbtns" data-sc="next"></div>
<div id="buttons" class="sliderbtns">
<div class="selectedbtn sliderbtns" id="button1" data-sc="1"></div> 
<div class="button sliderbtns" data-sc="2"></div> 
</div>

the javascript

$( ".sliderbtns" ).click(function() {
    var button_data = $(this).attr('data-sc');
    myslider(button_data);
});

the function in js

function myslider(position) {
    if (position == "next" && (currentslide == slidecount)) {
        position = 1;
    } else if (position == "next") {
        position = currentslide + 1; 
    } else if ((position == "prev") && (currentslide == 1)){
        position = slidecount;
    } else if ((position == "prev")) {
        position = position - 1;
    } else { 
        // position must then eqauls some integer from the data-sc attribute
        position =  parseInt(position);
        alert (position); // alerts properly the first time
        var out_slide = "Slide" + currentslide + "Out"; 
        var next_slide = "Slide" + position;
        alert(out_slide); //these work fine the first time 
        alert(next_slide);
        window[next_slide]();        
        window[out_slide]();
        // later on in the slide currentslide becomes position after this it returns value of Nan
        setTimeout( function() {
            currentslide = position;
            alert("this is the current slide position" + currentslide);
        }, 2000);
    /* ommited code */
    }
 }

The arrows work fine if I just click on the arrows but when I click on a button it proprly goes to the next slide but none of the buttons no longer work and display current position as NaN, I have tried making the position variable an int in a bunch of different ways with Number(position), ToInt and ParseInt, but still after currentslide = position it returns it as Nan and the slider can no longer find the proper slides and functions etc... If any one has any idea what I could be doing wrong, how to properly make sure it's an actuall integer if that's posssible from a data attribute, or maybe some other way around I can throw that data around as and int that could be gotten by clicking the arrows or buttons. Greatly appreciate any help!

Milind Anantwar · Accepted Answer · 2014-04-10 14:12:17Z

11

To get data use .data():

 $(this).data('sc')

answered Apr 10, 2014 at 14:12

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

4 Comments

Cerbrus Over a year ago

.data seems to return numeric values as such. No need for the parseInt

TheGr8_Nik Over a year ago

you can use $(this).data('sc') * 1 too ;)

phylax Over a year ago

when using parseInt allways add radix. parsetInt(var, 10) to parse to base 10.

Alex Over a year ago

Thank you all for commenting, it helped, and everything now works great, thanks again for all anwsers/comments. But also I realized that part of the problem was actually html becuase I accidently included the sliderbtns class both in the wrapper for the buttons and in each seperte button themselves, so it was actually calling the function twice, and of course being that the wrapper had no data-sc attribute it could be that it was getting a Nan value from their to begin with. But it all works great now, Thanks again and all the best!

jancha · Accepted Answer · 2014-04-10 14:22:38Z

2

Seems nobody reading the question.

NaN should appear due to this:

position = currentslide + 1;

From code, I cannot see currentslide being intialized. If you do undefined + 1, you get NaN.

Globally, set currentSlide = 0 to have it work properly. Unless you're hiding code.

ps. title does not match the question posed in the description.

answered Apr 10, 2014 at 14:22

jancha

4,9851 gold badge27 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to convert data attribute value to integer for in javascript?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related