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

Answer 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.

Answer 2

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 .

Answer 3

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.

Answer 4

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