Simple comparison condition is not working in JavaScript function [duplicate]

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
– Ian, Commented Apr 19, 2015 at 1:52

Michael Laszlo · Accepted Answer · 2015-04-19 02:05:23Z

3

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;

edited Apr 19, 2015 at 2:05

answered Apr 19, 2015 at 1:41

Michael Laszlo

12.2k3 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ted Johnson · Accepted Answer · 2015-04-19 01:40:55Z

0

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; }

answered Apr 19, 2015 at 1:40

Ted Johnson

4,3733 gold badges32 silver badges31 bronze badges

Collectives™ on Stack Overflow

Simple comparison condition is not working in JavaScript function [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related