Verwenden von JS, um eine dynamische Zahl zu formatieren

Question

Ich habe eine Anzeige, die ich arbeite, die Benutzereingaben von einer anderen Seite anzeigt, aber da diese Eingaben große Zahlen sein können, muss ich JS anwenden, um sie zu $ ​​1K statt $ 1000 zu formatieren , $ 1M statt $ 1.000.000 und so weiter. Ich habe ein paar Skripts ausprobiert, die in der Konsole funktionieren, aber keine Verbindung mit dem HTML herstellen, das einen Wert hat (den ich nur zum Testen des JS eingegeben habe). Ich muss sicherstellen, dass dies funktioniert, was auch immer innerhalb des Bereichs-Tags ist, da auf der tatsächlichen Anzeige ein dynamischer Wert vorhanden ist, der die Eingaben des Benutzers einbezieht. Ich bin mir ziemlich sicher, dass das Problem darin besteht, wie ich den Wert innerhalb der ersten Spanne mit der Klasse #old id/.current anrufe, aber ich habe mehrere Wiederholungen ausprobiert, wie ich diesen Wert erreichen kann und weiter davon entfernt bin Die Reparatur.

Ich habe zwei JS-Skripte, die derzeit auskommentiert sind, Versuch 1 und Versuch 2 und ich frage mich, ob es in Bezug auf die Variable ist, die vor der Funktion in Versuch 2 definiert ist oder wenn etwas fehlt Ende von beiden, damit das Skript auf den Wert angewendet wird, auf den ich abziele.

Hier ist die codepen ich bisher haben: http://codepen.io/linzgroves/pen/KgGPGX

Wenn jemand Anregungen hat, was hier einstellen, das wäre super hilfsbereit. Vielen Dank!

P.S. Ich habe einige der ähnlichen Fragen, die zur Formatierung von JS-Zahlen gestellt wurden (wie this) angeschaut (und ausprobiert), aber mein Problem scheint eher darin zu bestehen, dass ich den Wert innerhalb des span-Tags und nicht mit JS falsch anvisiere selbst. Wenn es jedoch eine ähnliche Frage bezüglich der Ausrichtung von Elementen gibt, würde ich gerne darauf hinweisen.

Lassen Sie mich auch wissen, ob es zusätzliche Informationen gibt, die ich bereitstellen muss.

Danke!

<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> 

Edit: die folgende var aktualisiert .innerText enthalten

/* 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

Ihre Funktionen gut funktionieren - wenn Sie die Änderungen in der DOM reflektiert wollen, müssen Sie setzen die innerText oder innerHTML von Ihrem #old Element.

Sie können dies erreichen, indem Sie Ihre nFormatter() Funktion wie so zu ändern:

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; 
} 

oder Sie können es einfach die Nummer übergeben und das zurückgegebene Ergebnis verwenden, um die innerText oder 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

Hier zu setzen ist eine aktualisierte codepen. Sie haben < = die obere Grenze und> = die untere Grenze für jede if-Anweisung getan. Dies würde dazu führen, dass mehrere if's wahr sind. Außerdem müssen Sie sicherstellen, dass Sie Ihre Funktion aufrufen, nachdem Sie sie erstellt haben, und ich würde empfehlen, nicht denselben Namen für eine globale Variable und einen Parameter für eine Funktion zu verwenden. Dies kann zu einem verwirrenden Verhalten führen.

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

In beide Versuchen Sie einen grundlegenden Schritt fehlen, das heißt: Sie nicht die Funktion sind aufgerufen wird.

Die Tatsache, dass Sie das Funktionsargument mit dem gleichen Namen der Variablen aufrufen, ist nicht genug. Im Gegensatz dazu blendet das Funktionsargument die externe Variable aus, auf die daher in der Funktion nicht per Name zugegriffen werden kann. Wie auch immer, dies ist nur eine zusätzliche Überlegung, nicht das eigentliche Problem.

Betrachten Versuch 1. Nach der Definition der Funktion, sollten Sie den tatsächlichen Aufruf hinzufügen, so etwas wie

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

Versuch 2 im Grunde das gleiche Problem hat (dh kein Funktionsaufruf), sondern auch müssen Sie die gewünschte erhalten Element (mit document.querySelectorAll zum Beispiel) vor der Übergabe an die prettifyNumber Funktion.

Zusammenfassend ist der erste Versuch der Korrekteste unter den beiden, wobei man bedenkt, dass beide Funktionen gut funktionieren.