JSを使用してダイナミック番号をフォーマットする

Question

私は、別のページからのユーザー入力を表示する広告を持っていますが、これらの入力は大きい可能性があるため、JSを適用して$ 1000ではなく$ 1K 、$ 1,000,000の代わりに$ 1Mなどとなります。私はコンソールで動作するいくつかのスクリプトを試しましたが、JSをテストするために入力した値を持つHTMLに接続していません。実際の広告では、ユーザーの入力が何であっても動的な値が引き込まれるため、これがスパンタグ内のものであれば動作することを確認する必要があります。 #old id/.currentクラスを使用して最初のスパン内の値をどのように呼び出すのかという点については問題があると確信していますが、その値をどのようにターゲットに設定するのかをいくつか試してみました。修正。

私は、現在試行されている2つのJSスクリプトがありますが、試行1と試行2があります。試行2の関数の前に定義されている変数と関連しているのか、私が目標とする値にスクリプトを適用させるには、ここで

は、私が持っているcodepenは、これまでのところです：http://codepen.io/linzgroves/pen/KgGPGX

誰もがここで調整するかについての提案を持っている場合、それはスーパー役に立つことと思います。ありがとうございました！

P.S.私はJS番号の書式設定（例えばthis）について尋ねられている同様の質問のいくつかを見てきましたが、私の問題は間違ってスパンタグ内の値を対象としていました。自体。しかし、要素を正しくターゲット設定することに関連する同様の質問がある場合は、その点も指摘しておきます。

また、追加情報が必要な場合はお知らせください。

ありがとうございます！

<div id="container"> 
<div id="inner"> 
<div id="message_container"> 

<div id="roi-headline"> 
<h2>Cool Header</h2> 
<h1>An even cooler headline</h1> 
</div> 

<div id="roi-values"> 
<div id="roi-value-1"> 
<div id="roi-value-1-graph" style="width:75%;"> 
    <em>from</em> <sup>$</sup> 
    <span id="old" class="current"> 
     100000 
    </span> 
</div> 
</div> 

<div id="roi-value-2"> 
<div id="roi-value-2-graph" style="width:100%;"> 
    <em>to</em> 
    <span><sup>$</sup>15<sup>K</sup></span> 
</div> 
</div> 

</div> 

<div id="button">Learn More</div> 
</div> 
</div> 
</div> 

編集： .innerText

/* Attempt 1 */ 
var num = document.getElementById("old").innerText; 
function nFormatter(num) { 

if (num >= 1000000000) { 
    return (num/1000000000).toFixed(1).replace(/\.0$/, '') + 'G'; 
} 
if (num >= 1000000) { 
    return (num/1000000).toFixed(1).replace(/\.0$/, '') + 'M'; 
} 
if (num >= 1000) { 
    return (num/1000).toFixed(1).replace(/\.0$/, '') + 'K'; 
} 
return num; 
}; 

/* Attempt 2 */ 
var value = "span.current"; 
function prettifyNumber(value) {  
var thousand = 1000; 
var million = 1000000; 
var billion = 1000000000; 
var trillion = 1000000000000; 
if (value < thousand) { 
    return String(value); 
} 

if (value >= thousand && value <= 1000000) { 
    return Math.round(value/thousand) + 'k'; 
} 

if (value >= million && value <= billion) { 
    return Math.round(value/million) + 'M'; 
} 

if (value >= billion && value <= trillion) { 
    return Math.round(value/billion) + 'B'; 
} 

else { 
    return Math.round(value/trillion) + 'T'; 
} 

}; 

Answer 1

が含まれるように、次のVARを更新しましたあなたの機能がうまく動作する - あなたがDOMに反映さの変更をしたい場合、あなたはになりますが、設定#old要素のinnerTextまたはinnerHTML

var num = document.getElementById("old"); 
function nFormatter(num) { 
    var oldNumber = num.innerText; 
    var newNumber = oldNumber; 
    if (oldNumber >= 1000000000) { 
    newNumber = (oldNumber/1000000000).toFixed(1).replace(/\.0$/, '') + 'G'; 
    } 
    if (oldNumber >= 1000000) { 
    newNumber = (oldNumber/1000000).toFixed(1).replace(/\.0$/, '') + 'M'; 
    } 
    if (oldNumber >= 1000) { 
    newNumber = (oldNumber/1000).toFixed(1).replace(/\.0$/, '') + 'K'; 
    } 
    num.innerText = newNumber; 
} 

ORあなたはそれだけの数を渡し、ここでinnerTextまたはinnerHTML

var num = document.getElementById("old"); 
function nFormatter(num) { 
    if (num >= 1000000000) { 
    return (num/1000000000).toFixed(1).replace(/\.0$/, '') + 'G'; 
    } 
    if (num >= 1000000) { 
    return (num/1000000).toFixed(1).replace(/\.0$/, '') + 'M'; 
    } 
    if (num >= 1000) { 
    return (num/1000).toFixed(1).replace(/\.0$/, '') + 'K'; 
    } 
    return num; 
} 
num.innerText = nFormatter(num.innerText); 

Answer 2

を設定するには、返された結果を使用することができます。

あなたはそうのようなあなたのnFormatter()機能を変更することによって、これを達成することができます更新されたcodepenです。 < =それぞれのif文の上限と> =下限を行っていました。これは複数のifが真である原因になります。また、関数を作成した後に必ず関数を呼び出す必要があります。グローバル変数と関数のパラメーターに同じ名前を使用しないことをお勧めします。それは、混乱を招く可能性があります。あなたが基本的なステップが欠落している両方の試みにおいて

var value1 = document.getElementById("old"); 
function prettifyNumber(value) {  
var thousand = 1000; 
var million = 1000000; 
var billion = 1000000000; 
var trillion = 1000000000000; 

value = parseInt(value); 

var retVal = ""; 
if (value < thousand) { 
    retVal = String(value); 
} 

if (value >= thousand && value < million) { 
    retVal = Math.round(value/thousand) + 'k'; 
} 

if (value >= million && value < billion) { 
    retVal = Math.round(value/million) + 'M'; 
} 

if (value >= billion && value < trillion) { 
    retVal = Math.round(value/billion) + 'B'; 
} 

if(value > trillion) { 
    retVal = Math.round(value/trillion) + 'T'; 
} 

value1.innerHTML = retVal; 

}; 

prettifyNumber(value1.innerText); 

Answer 3

、それは次のようになります。あなたが機能を起動していません。

変数の同じ名前で関数の引数を呼び出しているという事実では不十分です。逆に、関数の引数は、外部変数を隠すため、関数内では名前でアクセスできません。とにかく、これは単なる考慮事項であり、実際の問題ではありません。

が関数定義の後の試み1.を考えてみましょう、あなたは実際の呼び出しを追加する必要があり、

document.getElementById("old").innerText = nFormatter(num); 

のようなもの

試み2は基本的に同じ問題（すなわちなし関数呼び出しを）持っていますが、また、あなたが希望を取得する必要があります要素（例えば、document.querySelectorAll）をprettifyNumber関数に渡します。

要約すると、最初の試みは2つの中で最も正しいものですが、両方の機能がうまく動作することを覚えておいてください。