FatboyJames FatboyJames - 28 days ago 6
HTML Question

How to format a constantly changing span?

$<span id="money">0</span>


I have this span which is displaying how much money. This number is constantly updating since this is for an idle game that I am making.

function moneyClick(number) {
money = money + number;
document.getElementById("money").innerHTML = money;
lifetimeearnings = lifetimeearnings + number;
document.getElementById("lifetimeearnings").innerHTML = lifetimeearnings;
};

window.setInterval(function() {
moneyClick(thugs);
moneyClick(assassins * 3);
moneyClick(farms * 5);
moneyClick(lawyers * 11);
moneyClick(rackets * 23);
document.getElementById('thugEarn').innerHTML = thugEarn;
document.getElementById('thugs').innerHTML = thugs;
document.getElementById('assassinEarn').innerHTML = assassinEarn;
document.getElementById('assassins').innerHTML = assassins;
document.getElementById('farmEarn').innerHTML = farmEarn;
document.getElementById('farms').innerHTML = farms;
document.getElementById('lawyerEarn').innerHTML = lawyerEarn;
document.getElementById('lawyers').innerHTML = lawyers;
document.getElementById('racketEarn').innerHTML = racketEarn;
document.getElementById('rackets').innerHTML = rackets;
}, 1000);


The span is updated by the two functions above in javascript. I want to format the span to display the money with commas, for example 1234 will become 1,234 and 1234567 will become 1,234,567.

I've seen that there are ways to do this but none of them have worked for when the span is constantly being updated. Is there a way to keep the text formatted while it is being updated constantly?

Answer Source

Just add commas to the number before adding it to the DOM.

    //A function to add commas to the number
    var formatNumber = function (number) {
      var splitNum;
      number = Math.abs(number);
      number = number.toFixed(2);
      splitNum = number.split('.');
      splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      return splitNum.join(".");
    }

    function moneyClick(number) {
      money = money + number;

      //Add commas to the number before update the DOM
      document.getElementById("money").innerHTML = formatNumber(money);

      lifetimeearnings = lifetimeearnings + number;
      document.getElementById("lifetimeearnings").innerHTML = lifetimeearnings;
    };

    window.setInterval(function() {
      moneyClick(thugs);
      moneyClick(assassins * 3);
      moneyClick(farms * 5);
      moneyClick(lawyers * 11);
      moneyClick(rackets * 23);
      document.getElementById('thugEarn').innerHTML = thugEarn;
      document.getElementById('thugs').innerHTML = thugs;
      document.getElementById('assassinEarn').innerHTML = assassinEarn;
      document.getElementById('assassins').innerHTML = assassins;
      document.getElementById('farmEarn').innerHTML = farmEarn;
      document.getElementById('farms').innerHTML = farms;
      document.getElementById('lawyerEarn').innerHTML = lawyerEarn;
      document.getElementById('lawyers').innerHTML = lawyers;
      document.getElementById('racketEarn').innerHTML = racketEarn;
      document.getElementById('rackets').innerHTML = rackets;
    }, 1000);