This is my first JavaScript project, so I'm sure this code isn't pretty, and could be written in a much better way, but that aside, I've encountered a problem I just don't understand. I'm sure it's just a bug I've made myself, but I just simply can't find it.

The '>' (greater than) operator works fine on numbers over 100, but stops working when it gets to 100. For some reason 100 > 99 returns false?

,output

Move the slider to the right, and then slowly to the left, and you will see it returning "true" until it reaches 100. From there it returns "false"

function getSliderInput(inputSliderId) {
  var backSwingArray = [100];
  var downSwingArray = [];


  document.querySelector('#' + inputSliderId).addEventListener('input', fillArray , false);

function fillArray() {

  if (isNaN(downSwingArray[downSwingArray.length - 1]) && backSwingArray[backSwingArray.length - 1] < this.value) {
    backSwingArray.push(this.value);
  } else if (downSwingArray[downSwingArray.length - 1] > this.value || isNaN(downSwingArray[downSwingArray.length - 1])){
    console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
    downSwingArray.push(this.value);
  } else {
    console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
    return;
  }
}
}

This is my first JavaScript project, so I'm sure this code isn't pretty, and could be written in a much better way, but that aside, I've encountered a problem I just don't understand. I'm sure it's just a bug I've made myself, but I just simply can't find it.

The '>' (greater than) operator works fine on numbers over 100, but stops working when it gets to 100. For some reason 100 > 99 returns false?

https://jsbin./vigocu/edit?console,output

Move the slider to the right, and then slowly to the left, and you will see it returning "true" until it reaches 100. From there it returns "false"

function getSliderInput(inputSliderId) {
  var backSwingArray = [100];
  var downSwingArray = [];


  document.querySelector('#' + inputSliderId).addEventListener('input', fillArray , false);

function fillArray() {

  if (isNaN(downSwingArray[downSwingArray.length - 1]) && backSwingArray[backSwingArray.length - 1] < this.value) {
    backSwingArray.push(this.value);
  } else if (downSwingArray[downSwingArray.length - 1] > this.value || isNaN(downSwingArray[downSwingArray.length - 1])){
    console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
    downSwingArray.push(this.value);
  } else {
    console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
    return;
  }
}
}

• javascript

• You sure the values you're paring are both Numbers? This could be a type mismatch problem -- paring a string to a number. Try wrapping both values in a Number() function and see if the response changes. – Josh KG Commented Nov 3, 2015 at 17:34
• Your JSBin fails with "ReferenceError: getSliderInput is not defined at onload (https://null.jsbin./runner:1:162) at https://static.jsbin./js/prod/runner-3.35.3.min.js:1:13627 at https://static.jsbin./js/prod/runner-3.35.3.min.js:1:10537" In any case, wherever possible live examples should be here, on-site, using Stack Snippes (the <> button). – T.J. Crowder Commented Nov 3, 2015 at 17:35
• Instead of this.value, use parseInt(this.value, 10) to make sure the value string gets converted to a number! – Maximillian Laumeister Commented Nov 3, 2015 at 17:35
• Is the JSBin not working for any of you? I've tested it in several browsers and it works fine here. – Henrik Madsen Commented Nov 3, 2015 at 17:39
• @HenrikMadsen: Not for me on Chrome 46.0.2490.80 on Linux (see above). – T.J. Crowder Commented Nov 3, 2015 at 17:41

1 Answer 1

value on input elements is always a string. While that won't be a problem initially, when you're paring this.value to the 100 you've put in the array to start with, you then push this.value into the array as-is (as a string). That means later, you'll end up paring that stored string with another this.value value, which is also a string. If either operand to > is a number, it will coerce the other operand to number (the way + does, see below), but if both operands are strings, it will do a lexical parison, not a numeric one, and "100" is indeed < "99" because "1" is < "9".

So you want to convert this.value to a number early on, and then use that number both when paring and when pushing into your array. You have many ways to do that:

• The unary + will require the entire string to be a valid number, but will treat "" as 0; it will also treat strings starting with 0x as hexadecimal

  var num = +this.value;
  // or perhaps
  var num = this.value === "" ? NaN : +this.value;
  // or even
  var str = this.value.trim(); // .trim can be shimmed on obsolete browsers
  var num = str === "" ? NaN : +str;
  

• parseInt(..., 10) (the 10 is specifying the radix [number base] to use) will allow garbage at the end of the string, treat "" as NaN, and treat any string prefixed with 0x as 0 (since it stops at the first invalid character)

  var num = parseInt(this.value, 10);
  

• Number(...) does what + does

  var num = Number(this.value); // or variations above on +