引导卡上的Javascript代码排序不正确

Question

So I have some javascript code which is applied to a page with lots of contracts. All these contracts are inside bootstrap cards, and the price for the contract is on the h1 tag on each card. But my code is sorting wrong and I don't know how, it's always coming up with the wrong answer. All i want to do is find the cheapest contract-card and put a green border around it.

function checkChangeCheapestID(){
 //get all the price form the Cards
 //set the cheapest border to green for cheapest
 var amountOfCards = document.getElementsByClassName("card");
 var cheapestCard = 0;
 var cheapNum = 0;

 for (var i = 0; i<amountOfCards.length; i++){
  var cardTitleNow = document.getElementsByClassName("box-top-value")[i].innerHTML;

  if(i == 0){
    cheapestCard = cardTitleNow;
    cheapNum = i;
    //if there's no past reffrence of cheapest price then, it sets the one it gets to as the cheapest
  } else if (cardTitleNow<cheapestCard){
    cheapestCard = cardTitleNow;
    cheapNum = i;
 }
}

 var choosenCard = amountOfCards[cheapNum];
 choosenCard.style.boxShadow= "0 16px 14px green";
}
checkChangeCheapestID();

The prices on the cards are generated from a database through php.

Can someone help me figure out where it goes wrong?

Here's the html code, php is used through a framework called laravel.

<div class="card-body">

                        <div class="box-1-item">
                            <h6>{{($duration/12).' year/s contract'}}</h6>
                            <div class="box-top">

                                <p class="box-top-unit">£</p>
                                <h1 class="box-top-value">{{round((($years['annual']['amount'])/100),1,PHP_ROUND_HALF_UP)}}</h1>
                            </div>
                            <p class="box-top-dec">per Year</p>
                        </div>

                        <div class="box-2-items">
                            <div class="box-2-items-left">
                                <h5 class="box-2-items-left-text">Unit charges</h5>
                                <div class="box-2-items-left-value">
                                    <div class="box-2-items-left-value-val">
                                          <p>{{round(($years['unit_charge']['charge']),2,PHP_ROUND_HALF_UP)}}</p>
                                    </div>
                                    <p class="box-2-items-left-value-unit">{{'p/'.($years['unit_charge']['unit'])}}</p>
                                </div>
                            </div>
                            <div class="box-2-items-right">
                                <h5 class="box-2-items-left-text">Standing charges</h5>
                                <div class="box-2-items-left-value">
                                    <p class="box-2-items-left-value-val">{{round(($years['standing_charge']['charge']),2,PHP_ROUND_HALF_UP)}}</p>
                                    <p class="box-2-items-left-value-unit">{{'p/'.($years['standing_charge']['unit'])}}</p>
                                </div>
                            </div>
                        </div>

                        <div class="box-2-items">
                            <div class="box-2-items-left">
                                <h5 class="box-2-items-left-text">Start Date:</h5>
                                <div class="box-2-items-dates">
                                      <p>{{$quotes['start_date']->format('d/m/Y')}}</p>
                                </div>
                            </div>
                            <div class="box-2-items-right">
                                <h5 class="box-2-items-left-text">End Date:</h5>
                                <div class="box-2-items-dates">
                                      <p>{{$quotes['start_date']->copy()->addMonths($duration)->format('d/m/Y')}}</p>
                                </div>
                            </div>
                        </div>

                    </div>

Answer 1

Your problem is this line:

if (i == 0) 

This will always be true the first time, so it should be this:

if (cardTitleNow == 0)

Answer 2

So apparently it was treating is as a string. There for each char was treated as the sorting through instead of the whole number. So 111 would be lower than 9 because 1 is less than 9.