为什么较大的变量小于较小的变量

Question

Summary:
I have a code that takes words from a database, it puts it all in a box which has 3 by 3 text boxes (you can also expand instead of using 3 boxes, which I confirmed worked).

Inside the boxes, it takes the height of the words and sets that height to the height of the div holding the words, then places that height inside of a array. If a div is not there (no text), it places a 0.

Every 3rd time it does this, which is 1 row, it will check the height of the three in the row, and set the div above them as the biggest height, like so:

    var tempN = 0; //Holds each number temporarily
    var temp = []; //Holds all 9 box heights

    for (var i = 0; i < Panels.length; i++) { //There are 9 panels
        temp[i] = new Array(); //adding to array
        if (document.getElementById('Column'+i+Id[Ten])!=null) {//Id[Ten] will be 3, 2, and 1, in a for loop
            document.getElementById('Column'+i+Id[Ten]).style.height = document.getElementById('Text'+i+Id[Ten]).clientHeight+"px";
            temp[i].push(document.getElementById('Column'+i+Id[Ten]).clientHeight); //puts number on table
        } else {
            temp[i].push(0); //since there is no panel, the height would be 0
        }

        if (i%3 == 2) { //every 3rd time
            for (var x=2;x >= 0;x--) { //also could do (var x=0;x<3;x++)
                alert(temp[i-x]+" is greater than "+tempN); //tells me what should work
                if (tempN < temp[i-x]) { //also could do the other way around
                    tempN = temp[i-x]; //tempN will be the current biggest height
                    alert(tempN+' '+temp[i-x]); //just a show it went through if
                    document.getElementById('Row'+BoxRow+Id[Ten]).style.height = tempN + "px";
                }
            }
            tempN = 0; //reset tempN for next 3 boxes
        }
    }
    temp = []; //reset temp for next box

Now, the way my page is, temp will be:

temp = [0,158,0,0,158,0,0,50,0] when Id[Ten] is 3
temp = [0,50,0,0,0,0,0,0,0] when Id[Ten] is 2
temp = [284,50,50,50,50,50] when Id[Ten] is 1

The Problem:
when my code gets to Id[Ten] is 1, It will start by saying:
"284 is greater than 0"
which is planned, then I get:
"284 284"
which is also planned, then:
"50 is greater than 284"
Here is the problem: what came after that is what should have been skipped:
"50 50"
This tells me that the if statement I have passed True once it saw 284 < 50. I have done math at least more than once in my life, and I know 284 is a bigger number than 50. Due to this, my box has a smaller height than the text in it, and they overlap in an way uglier than me. I'm sure my code and I are having some kind of mid-life crisis, and would be great if someone can explain to me why my code is going through this rebellious stage.

Answer 1

This is caused because you are comparing string to string, when comparing string js verify only your alphabetical order.

You have to use parseInt in your variables.

This is the test I did in the chrome console.

var test1 = 50
var test2 = 200;

test1 > test2
false

--------

var test1 = "50"
var test2 = "200";

test1 > test2
true

parseInt(test1) > parseInt(test2)
false

Answer 2

Your code is comparing strings (alphabetical order):

"Zoo" > "Apple" // true
"50" > "284" // true

You need to compare numbers by using something like parseInt:

parseInt("50") > parseInt("284"); // false

 var stringResult = "50" > "284"; // true var intResult = parseInt("50") > parseInt("284"); // false document.getElementById('strings').textContent = stringResult; document.getElementById('ints').textContent = intResult; 

 <h3>Result of "50" > "284" = <span id="strings"></span> </h3> <h3> Result of parseInt("50") > parseInt("284") = <span id="ints"></span> </h3> 

Answer 3

In javascript everything is an object.It does not has any type It determines type by the way we declare it Here you are comparing (tempN < temp[ix]) tempN and temp[ix] both are strings you have to convert them to numbers and then compare

   var number1=parseInt(tempN,10);
    var number2=parseInt(temp[i-x],10);
     console.log(number1<number2);

If you want to convert array of numbers to get sorted but not alphabetically you can do something like this

var numbers=[1,90,5,8];
numbers.sort(SortCompare);
function SortCompare(a,b){
return a-b;
}

Hope this helps