Reads value like text rather than number

Question

I have this code:

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width'),
    max1 = 100,
    min1 = 20,
    max2 = 400,
    min2 = 10;

max1box.addEventListener('change', validateValues, false);
max2box.addEventListener('change', validateValues, false);


function validateValues() {

    if (this == max1box && this.value > max1 && this.value > max2box.value) {
        max1box = max2box;
        max2box = this;

        document.getElementById("output").innerHTML = "Max1Box is " + max1box.id + ", Max2Box is " + max2box.id;
    }

    if (max1box.value > max1) {
        max1box.value = max1;
    }
    if (max1box.value < min1) {
        max1box.value = min1;
    }

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
}

http://jsfiddle.net/ew58v/

The idea is, that if I type "300" in one box, then I should be able to override that by typing a higher number in the other box. Unfortunately the code only reads the first number of the value. Meaning "25484" is not considered a higher number than "300" in my code.

How come?

Answer 1

You'll be wanting to strategic make use of a parseInt(). For example:

var max2boxVal = parseInt(max2box.value,10);

Don't forget to include the radix (10) as I have done above. The big catch with failing to do this is that values starting with '0' will be assumed to be octal. E.g:

alert(parseInt("010")); //alerts '8'

For a better performing conversion, try -0

var max2boxVal = max2box.value - 0;

(According to this Stackoverflow post)

I prefer the former, however as it is more explicit, and easier for future maintainers of code to understand.