Question

我正在制作一个广告，显示来自另一个页面的用户输入，但由于这些输入可能是大数字，我需要应用JS将它们格式化为$ 1K而不是$ 1000，$ 1M而不是1,000,000 $等等。我已经尝试了一些在控制台中工作的脚本，但是没有连接具有值的HTML（我只是为了测试JS而输入）。我需要确保这将适用于span标记内的任何内容，因为在实际广告中会有一个动态值，无论用户的输入是什么，它都会被拉入。我很确定这个问题是关于我如何使用#old id / .current类调用第一个范围内的值，但是我已经尝试了几次迭代，如何定位该值并从中获得更多修复。

我有两个当前被注释掉的JS脚本，Attempt 1和Attempt 2我想知道它是否与在Attempt 2中的函数之前定义的变量相关，或者是否在最后缺少某些东西要么将脚本应用于我要定位的值。

这是我到目前为止的编码：http://codepen.io/linzgroves/pen/KgGPGX

如果有人有关于在这里调整什么的建议，这将是非常有帮助的。谢谢！

P.S。我已经查看（并尝试过）有关JS编号格式的几个类似问题（例如this），但我的问题似乎更多的是我错误地定位了span标记中的值并且不是JS本身。但是，如果存在与正确定位元素相关的类似问题，我也很乐意指出这一点！

另外，如果我需要提供其他信息，请与我们联系。

谢谢！

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

修改：将以下var更新为包含.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

您的功能运作正常 - 如果您希望更改反映在DOM中，您必须设置 innerText或innerHTML #old元件。

您可以通过更改nFormatter()功能来完成此操作：

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

或者您可以只传递数字并使用返回的结果来设置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

这是更新的codepen。你在每个if语句中执行＆lt; =上限和＆gt; =下限。这将导致多个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）。

总结一下，第一次尝试是两者中最正确的一次，请记住这两种功能都可以正常工作。

使用JS格式化动态数字

3 个答案: