Javascript IF statement not comparing two variables

I am working on a game and I am using an IF statement to compare if the users money is enough. For some reason the IF statement is just skipped, I don't know why.How can I get this working?

function upgradehd(al) { 
    var cash = document.getElementById('cash').innerHTML;
    var hdc = document.getElementById('hdc');
    if(Number(cash) >= hdc.innerHTML){
        cash = cash - hdc;
        var hdl = document.getElementById('hdl');
        var levelhd = parseFloat(hdl.innerHTML);
        var to = level * 20;
        var nhdc = Math.floor(1.5 * hdc.innerHTML); 
        var bar = document.getElementById('hdpb');
        var status = document.getElementById('hdpbs');
        status.innerHTML = al+"%";
        bar.value = al;
        al++
        var sim = setTimeout("upgradehd("+al+")",to);
        if(al == 100){
            var xp = hdc.innerHTML - (hdc.innerHTML / 10) /4 ;
            levelup(xp);
            status.innerHTML = "100%";
            hdl.innerHTML = levelhd + 1;
            hdc.innerHTML = nhdc;
            hd.innerHTML =  +hd.innerHTML +50;
            bar.value = 0;
            status.innerHTML = al+"%";
            clearTimeout(sim);
        }
    } else{
      alert("Not Enough");
    }
}

<div class="stats">
    <p>Level: <span id="level">1</span></p>
    <progress style="width:150px;background-color:#66ff33;" id="lvelprogress" value="0"></progress>
    <p>Cash: $<span id="cash">500</span></p>
    <p>R.A.M: <span id="ram">100</span>MB</p>
    <p>Internet Speed: <span id="internet">25</span>MB/s</p>
    <P>Hard Drive: <span id="harddrive" >250</span>GB</P>
</div>
<p id="uhd">Upgrade Hard Drive: $<span id="hdc">100</span> Level:<span id="hdl"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<progress class="upgrade" id="hdpb" value="0" max="100"></progress>
<span id="hdpbs"></span>