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

【问题标题】：Add numbers from list of divs into total div将 div 列表中的数字添加到总 div
【发布时间】：2021-08-05 20:46:21
【问题描述】：

假设我有以下内容：

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

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

【问题讨论】：

你有c1(),c2(),c3()“in-hand”的值——在你想要做加法的时候可供JS使用吗？或者您是在问如何在 c1(),c2(),c3() 已经将它们写入 DOM 之后的某个时间点首先抓取 DOM 以获取这些值？

标签： javascript html math parsefloat

【解决方案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">$10,000</div>
<div id="c2">$21,500</div>
<div id="c3">$1,550</div>
<div id="c4">Total</div>

【讨论】：

无法正常工作。任何更多的帮助表示赞赏。谢谢
我更新了我的代码以包含一个有效的 sn-p
完美。谢谢！ jsfiddle.net/hcanning2012/0zxugat4/2

【解决方案2】：

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

<div id="c">
    <div id="c1">$10,000</div>
    <div id="c2">$21,500</div>
    <div id="c3">$1,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>

【讨论】：

谢谢。不幸的是，我无法让它工作
什么不起作用，你在代码中添加了什么？
我的错误。效果很好。谢谢！！ jsfiddle.net/hcanning2012/0zxugat4/4