Simple comparison condition is not working in JavaScript function

Question

I stored some values in input hidden elements in HTML

<input type="hidden" class="w_e_t_t_c_d" value="1659" />
<input type="hidden" class="w_e_t_t_c_d" value="1569" />
<input type="hidden" class="w_e_t_t_c_d" value="1699" />
<input type="hidden" class="w_e_t_t_c_d" value="500" />

<div id="max_num"></div>

Then I am trying to access maximum value by this JavaScript function

function decre_incoming_troops()
{
    //Selecting all elements of class w_e_t_t_c_d
    var incoming_troops = $('input:hidden.w_e_t_t_c_d');
    var lastReach = 0;
    for(var i = 0; i < incoming_troops.length; i++)
    {
        if(incoming_troops[i].value > lastReach)
        {
            lastReach = incoming_troops[i].value;
        }
        document.getElementById("max_num").innerHTML = lastReach;
    }
}

decre_incoming_troops();

But unexpectedly this function is not giving maximum value.
I debugged it in detail and fined that this if(incoming_troops[i].value > lastReach) comparison condition is returning wrong result.
I don't know that is there any bug or logical error in the code.
Here is running example in FIDDLE
Or you can check the same here in snippet below

function decre_incoming_troops()
{
    //Selecting all elements of class w_e_t_t_c_d
 var incoming_troops = $('input:hidden.w_e_t_t_c_d');
 var lastReach = 0;
 for(var i = 0; i < incoming_troops.length; i++)
 {
        if(incoming_troops[i].value > lastReach)
        {
            lastReach = incoming_troops[i].value;
        }
        document.getElementById("max_num").innerHTML = lastReach;
 }
}

decre_incoming_troops();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="hidden" class="w_e_t_t_c_d" value="1659" />
<input type="hidden" class="w_e_t_t_c_d" value="1569" />
<input type="hidden" class="w_e_t_t_c_d" value="1699" />
<input type="hidden" class="w_e_t_t_c_d" value="500" />

<div id="max_num"></div>

Thank you in advance.

FYI - I think you could use something like: `Math.max.apply(Math, $("input:hidden.w_e_t_t_c_d").map(function () { return $(this).val(); }).get())` to get the max value — Ian, Apr 19 '15 at 01:52

Michael Laszlo · Accepted Answer · 2015-04-19T02:05:23.883

You're performing lexicographic comparison on string values. Instead, you should convert to an integer:

parseInt(incoming_troops[i].value, 10)

I fixed the fiddle for you:

https://jsfiddle.net/ub5pw6r8/2/

var lastReach = 0;
for (var i = 0; i < incoming_troops.length; i++) {
    var x = parseInt(incoming_troops[i].value, 10);  // Base-10 conversion.
    if (x > lastReach) {
        lastReach = x;                               // Current maximum.
    }
}  // When the loop is done, we have the overall maximum. Now display it.
document.getElementById("max_num").innerHTML = lastReach;

score 0 · Answer 2 · answered Apr 19 '15 at 01:40

The value you got from the tag is a string. You need it to be a number.

if(new Number(incoming_troops[i].value) > lastReach)

parseInt() as stated also works.

Also you only have to set the DOM element if you have found a larger number current = new Number(incoming_troops[i].value)

if(current > lastReach) { lastReach = current; document.getElementById("max_num").innerHTML = lastReach; }

Simple comparison condition is not working in JavaScript function

2 Answers2