常に変化する数字をコンマでフォーマットする

Question

私は増分/アイドルゲームを作ることを試みています。カンマを使って大量の数字を区切りたいと思っています。例えば、1,000は1,000になります。値は変更されるまですべて変化します。

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

上記は、spanタグを使用してjavascriptからmoney変数を呼び出す方法を示しています。どのように私はこのお金の変数が常に変化してもフォーマットされたままであることを確認するでしょうか？

編集

function formatNumber(e){ 
var rex = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g, 
    val = this.value.replace(/^0+|\.|,/g,""), 
    res; 

if (val.length) { 
res = Array.prototype.reduce.call(val, (p,c) => c + p)   // reverse the pure numbers string 
      .match(rex)           // get groups in array 
      .reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c); // insert (.) and (,) accordingly 
res += /\.|,/.test(res) ? "" : ".0";        // test if res has (.) or (,) in it 
this.value = Array.prototype.reduce.call(res, (p,c) => c + p); // reverse the string and display 
    } 
} 

var mySpan = document.getElementById("money"); 
mySpan.addEventListener("change", formatNumber); 

私は今、私のjavascriptのにこのコードを実装しているが、それはまだ変数を更新していないようです。

編集2

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

}。

Answer 1

ゲームのJavaScriptのmoney変数の変更を計算するたびに@redu pointed outの何らかのバリエーションを使用して更新するか、またはでsetInterval（）を使用して100ミリ秒ごとに更新します。

Answer 2

OK ..私のコメントは多少間違っていました。 "change"イベントリスナーは、textContentのような子ノードでの変更を知らないことを理解しています。実際にはこの"DOMSubtreeModified"イベントリスナーが利用できます。そう;

function formatNumber(e) { 
 
    var rex = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g, 
 
     val = this.textContent.replace(/^0+|\.|,/g, ""), 
 
     res; 
 

 
    if (val.length) { 
 
    res = Array.prototype.reduce.call(val, (p, c) => c + p)      // reverse the pure numbers string 
 
         .match(rex)            // get groups in array 
 
         .reduce((p, c, i) => i - 1 ? p + "," + c : p + "." + c); // insert (.) and (,) accordingly 
 
    res += /\.|,/.test(res) ? "" : ".0";           // test if res has (.) or (,) in it 
 
    this.textContent = Array.prototype.reduce.call(res, (p, c) => c + p);   // reverse the string and display 
 
    } 
 
} 
 

 
var mySpan = document.getElementById("money"); 
 
mySpan.addEventListener("DOMSubtreeModified", formatNumber); 
 

 
for (var i = 0; i < 10; i++) { 
 
    setTimeout(_ => mySpan.textContent = Math.floor(Math.random() * 10000000), 1000 * i); 
 
}

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