Stumped: Javascript Comparison Error

Question

I'm writing a plotting/graphing library for Javascript and came across what seems to be a huge issue.

I have 4 number inputs for defining the minimum and maximum values that the graph will display, much like on a TI-84 graphing calculator: XMin, XMax, YMin, YMax.

<div id="window">
    <input type="number" class="bound" id="minX" value="" />
    <input type="number" class="bound" id="maxX" value="" />
    <br />
    <input type="number" class="bound" id="minY" value="" />
    <input type="number" class="bound" id="maxY" value="" />
</div>

Then I have code that grabs these values and puts them into the function Plot.setBounds(xMin, xMax, yMin, yMax) whenever they are modified:

var plot1 = new Plot();
$('#window .bound').change(function() {
    var minX = $('#window #minX').val(),
        maxX = $('#window #maxX').val(),
        minY = $('#window #minY').val(),
        maxY = $('#window #maxY').val();
    console.log('modified to:', minX, maxX, minY, maxY);
    plot1.setBounds(minX, maxX, minY, maxY);
    plot1.draw();
});

Finally, for the Plot.setBounds(xMin, xMax, yMin, yMax) function, I have:

Plot.prototype.setBounds = function (xMin, xMax, yMin, yMax) {
    if ((xMin < xMax) && (yMin < yMax)) {
        this.bounds = [[xMin, xMax], [yMin, yMax]];
    } else {
        console.error('Plot.setBounds(xMin, xMax, yMin, yMax) requires maximum values that are greater than the minimum values!');
        console.log('received:', xMin, xMax, yMin, yMax);
    }
    return this;
};

The problem arises, however, when xMin >= 2 and xMax >=10, where an error is thrown into the console because for some reason the comparison returned false. You can check the numbers given before and after the error (modified to and received), and they will have the same values.

Another peculiar fact is how when the computation for the same numbers is put into the console by hand, the comparison returns true. This makes me believe it has something to do with the calling of the function.

It is also interesting to note how the problem only occurs when xMin >= 2 and xMax >= 10.

I have a preview you can test here: http://dl.dropbox.com/u/962292/web/plot.js/static.html

I'd be infinitely grateful if you could find a solution to my situation.

score 6 · Accepted Answer · answered Oct 04 '11 at 02:46

6

You have strings and need numbers:

var minX = +$('#minX').val(),
    maxX = +$('#maxX').val(),
    minY = +$('#minY').val(),
    maxY = +$('#maxY').val();

+ is a simple quick conversion to a number. And IDs are unique to #window is irrelevant.

For example, "9" > "19"; // true

answered Oct 04 '11 at 02:46

Joe

80,724
18
127
145

Of all my time with javascript, why didn't I know about that? Why do people use parseInt if you can just put a plus sign in front of a string? – mowwwalker Oct 04 '11 at 02:49
@Walkerneo, if you want in Integer you need parseInt or use a bitwise or with zero, `"34.34" | 0; // 34`. – Joe Oct 04 '11 at 02:51
I noticed that this might return a string, but the values given from `console.log()` showed otherwise. Anyways, I tried both with the `+` sign and using `parseFloat()`, and neither seem to work. I like your thinking though :D – mdcio Oct 04 '11 at 02:54
Nevermind, it seems to work now. I must have been editing the older revision of code but viewing the newer one. Silly me =P – mdcio Oct 04 '11 at 03:04

score 0 · Answer 2 · answered Oct 04 '11 at 02:47

0

Another way to get a number is with parseInt().

answered Oct 04 '11 at 02:47

Ryan Allen

71
1
5

Stumped: Javascript Comparison Error

2 Answers2