将 div 列表中的数字添加到总数 div

Question

假设我有以下内容：

<div id="c1">,000</div>
<div id="c2">,500</div>
<div id="c3">,550</div>
<div id="c4">Total</div>

每个 id 中的值都是单独函数的结果，例如 c1()、c2()、c3()。我想将这些函数的结果相加 10,000+21500+1550 并在 div id= 中输出总数 c4”。如何将总数输出到最后一个 div id="c4" 并将其格式化为美国货币，例如 $33,050 谢谢

Answer 1

(() => {
  const $ = s => document.getElementById(s);
  const c1 = +$("c1").textContent.replace(/\D/g, "");
  const c2 = +$("c2").textContent.replace(/\D/g, "");
  const c3 = +$("c3").textContent.replace(/\D/g, "");
  $("c4").textContent = `Total = $${(c1 + c2 + c3).toLocaleString()}`;
})();

<div id="c1">,000</div>
<div id="c2">,500</div>
<div id="c3">,550</div>
<div id="c4">Total</div>

Answer 2

您可以将 c1-c3 div 添加到另一个 div 并遍历包装元素的子元素

<div id="c">
    <div id="c1">,000</div>
    <div id="c2">,500</div>
    <div id="c3">,550</div>
</div>
<div id="c4">Total</div>
<script>
    const valuesElement = document.getElementById("c");
    let sum = 0;
    for (const child of valuesElement.children) {
        sum += parseFloat(child.innerText.replace(/\D/g, ''));
    };
    const totalElement = document.getElementById("c4");
    totalElement.innerText = "$" + sum.toLocaleString();
</script>

将 div 列表中的数字添加到总数 div

Add numbers from list of divs into total div

javascript

html

math

parsefloat