Naginipython Naginipython - 11 months ago 45
Javascript Question

Why is a bigger variable less than a smaller variable


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 Source

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


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

test1 > test2

parseInt(test1) > parseInt(test2)