Javascript great than and less than not functioning correctly

Question

I am using a set of functions pull an image from the URL. For example if the URL is example.com/image/8/ the 8th image will be loaded.

The problem is that when the URL is less than 10 it doesn't work (and my function sets the varNumber to 1, but when its 10 or more the fuction works fine. Here is the code..

var totalCount = '<?php echo $total; ?>'; 
HREF = '<?php echo get_permalink($post->ID); ?>';

var url = window.location.pathname;
var urlsplit = url.split("/");
var imgNumber = urlsplit[5];


if (typeof imgNumber === 'undefined') {
       imgNumber = 1;
 } else if (imgNumber < 1) {
       imgNumber = 1;
       history.pushState('', '', HREF);

 } else if (imgNumber > totalCount) {
       alert("else if ( " + imgNumber + " > " + totalCount + ")");
       imgNumber = 1;
       history.pushState('', '', HREF);

 } else {
    $("#slider-"+imgNumber).removeClass("img-inactive");
    $("#slider-"+imgNumber).addClass("img-active");
    $("#slider-1").removeClass("img-active");
    $("#slider-1").addClass("img-inactive");
 }

As you can see the code above first checks to see if the varNumber is defined then checks if its less than 1. After that it checks if it's greater than the totalCount. This is where it gets messed up. Ive checked my browser console and ran the alerts to to verify the totalCount and imgNumber have variables.

To get a better example see the following links:

imgNumber > totalCount Does not work... http://badsentinel.com/2014/09/18/daily-giftastic-take-away-these-three-fingers-and-what-are-we-left-with-13-gifs/3/

imgNumber > totalCount works fine... http://badsentinel.com/2014/09/18/daily-giftastic-take-away-these-three-fingers-and-what-are-we-left-with-13-gifs/10/

Thanks in advance

Kartikeya Khosla · Accepted Answer · 2014-09-20T05:19:16.240

1

First Parse the value with parseInt as shown :

var imgNumber = parseInt(urlsplit[5],10);  //second parameter i.e '10' here is radix which is optional but it is advised to use it.

Otherwise in javascript/jquery values are treated as string when we deal in numbers we have to parse it with parseInt or parseFloat.

EDIT :- As per your comment try this :

var imgNumber = parseInt(urlsplit[5],10) || 0; //if parseInt() fails to parse value to int then it will return 0 value.

edited Sep 20 '14 at 05:19

answered Sep 20 '14 at 04:25

Kartikeya Khosla

18,743
8
43
69

The code you gave me worked for that issue.. But now it has created another issue. Now when I go the root link it is not defining the imgNumber. Can you please tell me what `if (typeof imgNumber === 'undefined') { imgNumber = 1; }` needs to be changed to. I'm guessing `typeof` is also for a string so would you be able to tell me what it is for an int? thank you. – Paul Sep 20 '14 at 05:09
Thank you very much.. Since it was setting the var to zero I had to change the if statement to check if it was set to 0 instead of undefined. Otherwise it was going into an infinite loop because my code cant have a "0" image. It must be between 1 and the totalcount. Looks like its working now though. Cheers!! – Paul Sep 20 '14 at 05:38

score 0 · Answer 2 · answered Sep 20 '14 at 04:24

0

When grabbing the imgNumber do this instead:

var imgNumber = parseInt(urlsplit[5]);

urlsplit[5] will retrieve a string, so you need to parse it to an int.

answered Sep 20 '14 at 04:24

Josep

12,926
2
42
45

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

You should explicitly convert imgNumber from the string representation retrieved from window.location.pathname to a number prior to comparing it. When you compare a string value to a numeric literal, the numeric literal is cast to a string rather than the other way around.

See Why is string "11" less than string "3"? for clarity on why they're sorting that way.

edited May 23 '17 at 11:50

Community

1
1

answered Sep 20 '14 at 04:27

DougM

2,808
17
14

score 0 · Answer 4 · answered Sep 20 '14 at 04:33

0

Change urlsplit[5]; to +urlsplit[5]; so it gets cast to a Number. It's a String.

answered Sep 20 '14 at 04:33

StackSlave

10,613
2
18
35

Javascript great than and less than not functioning correctly

4 Answers4