Javascript:Don'；t求不可见元素的和

我试图对HTML元素中的值列表求和，但我想排除使用纯JS隐藏的值

HTML:

在JS小提琴中，您可以看到所有的数字都被添加，包括隐藏的数字

正确的输出应为1.102

请注意，我无法更改HTML的层次结构

---

我对JS比较陌生，整天都在努力寻找解决方案。

当迭代元素时，检查它们是否为

null

-如果是，它们不可见：

const getClassValues=（className，乘数=1）=>[…document.getElementsByClassName（className）]
.filter（elm=>elm.offsetParent！==null）
.减少（（a，b）=>a+（b.textContent*乘数），0）；
document.querySelector（'.servings'）。textContent=(
GetClassValue（'grams'）+GetClassValue（'mg'，0.001）
);
1
2.
100
2.


总数：
如果设置
显示：无
在将属性添加到总计之前，可以在特定grams div上检查属性：


函数可见（e）{
return！！（e.offsetWidth | | e.offsetHeight | | e.getclientracts（）.length）；
}
addEventListener（'load'，function（））{
让gramdivs=document.getElementsByClassName（“grams”）；
设miligramdivs=document.getElementsByClassName（“毫克”）；
设total=0；
用于（gramdivs的let项目）{
如果（！isVisible（项目））继续；
让itemPrice=parseFloat（item.textContent）；
合计+=项目价格；
}
用于（毫格拉姆迪夫项目）{
如果（！isVisible（项目））继续；
让itemPrice=parseFloat（item.textContent）；
总计=总计+项目价格/1000；
}
document.getElementsByClassName（“服务”）[0]。innerText=total.toFixed（3）；
})
1
2.
100
2.


总数：
这不是设置HTML元素的软件的选项。就像其他解决方案一样，当我将其付诸实践时，它似乎不起作用。我看不出导致它失败的真实版本有什么不同。本页的调查问卷信息如下：bws-temp1.com/gamer-drink。如果您仔细检查并为所有答案选择“否”，则我要在成分汇总页面上进行计算。此代码的输出为0。@JonathanBuckley取决于您如何调用它。因为这个是在窗口加载下运行的。但在您的设计中没有窗口负载。因此，您已将其包装为函数，并在表单末尾调用它进行计算。如果代码不起作用，请在问题本身中发布一条消息-我的答案中的代码看起来不错，请按“运行代码片段”查看它的运行情况，我不知道你的网站在做什么当用户通过调查问卷时，脚本在加载之前的问题。谢谢
<div class="grams">1</div>
<div style="display: none;">
  <div class="grams">2</div>
</div>
<div class="milligrams">100</div>
<div class="milligrams">2</div>
<br>
<div>Total:</div>
<div class="servings"></div>

window.addEventListener('load', function() {
  let gramdivs = document.getElementsByClassName("grams");
  let milligramdivs = document.getElementsByClassName("milligrams");
  var total = 0;
  for (let item of gramdivs) {
    let itemPrice=parseFloat(item.textContent);
    total += itemPrice;
  }
  for (let item of milligramdivs) {
    let itemPrice=parseFloat(item.textContent);
    total = total + itemPrice / 1000;
  }
  document.getElementsByClassName("servings")[0].innerText = total.toFixed(3);
})