Javascript 为什么签出价格的值被读取为空？

我试图从几个元素中提取一个文本字符串，删除符号，将其转换为一个数字，然后组合这些数字，得到一个总值，然后更新该总值。我收到一个错误，上面写着“无法读取属性”长度为null。“

这是我的代码，我正试图使，但我不知道我是否在正确的轨道上

let price_calc = document.querySelectorAll("#checkout-price");
let total = ""
for (i = 0; i <= price_calc.length; i++){
    total += (Number(price_calc[i].textContent.replace(/[^\d|.]/g, "")))
}
let costEl = document.getElementById("total-cost")
costEl.textContent = `$${total}` 

let price_calc=document.queryselectoral（“签出价格”）；
让total=“”
对于（i=0；i只需这样做


const price\u calc=document.queryselectoral（“.price”）
，costEl=document.getElementById（“总成本”）
;
合计=[…价格计算]
.减少（（总量，el）=>
{
tot+=编号（el.textContent.replace（/[^\d|.]/g，”））
返回总数
}
,0)
costEl.textContent=`$${total}`
523.61美元（GST公司）
137.23美元（商品及服务税公司）
274.20美元（商品及服务税公司）
$00.00
让price_calc=document.querySelectorAll（“.price”）；
设总数=0
对于（i=0；i

重要的是，
total
是一个int，因此将其初始化为0而不是空字符串。另外，请确保使用
parseInt（）
将替换的文本转换为int。如果不希望它对浮点进行四舍五入，请使用
Number（）
上面的代码应该可以工作。
ID不正确这是因为您的HTML无效请尝试以下操作：让price\u calc=document.queryselectoral（“.price”）；ID必须是唯一的，因此您也需要调整HTML。如果不需要，请删除ID。请一次处理一个问题。我们回答了您的问题，因此请不要编写新的类似问题
<div class='price' id="checkout-price">$523.61 (GST Inc)</div>
<div class='price' id="checkout-price">$137.23 (GST Inc)</div>
<div class='price' id="checkout-price">$274.20 (GST Inc)</div>
<div class='price_sum'id="total-cost">$00.00</div>

let price_calc = document.querySelectorAll(".price");
let total = 0

for (i = 0; i < price_calc.length; i++){
    total += parseInt(price_calc[i].innerHTML.replace(/[^\d|.]/g, ""))
}

let costEl = document.getElementById("total-cost")
costEl.textContent = `$${total}`