获取元素文本转数值计算时持续出现NaN问题求助

我需要获取两个元素的textContent：一个是带$符号的价格元素，另一个是购物车数量元素。把它们转成数值后相乘，结果赋值给第三个元素显示，但每次都得到NaN。试过Number()和parseInt()都没用。

原JS代码 #

let price = document.getElementById("productPrice").textContent;
let stack = document.getElementById("cartCounter").textContent;
let num = parseInt(price);
let num2 = parseInt(stack);
let sum = num * num2;
alert(sum); // 返回NaN
document.getElementById("finalPrice").innerText = num;

对应HTML结构 #

<div id="cartBox">
    <h5>Cart</h5>
    <hr>
    <img src="images/image-product-1.jpg" alt="#" id="test">
    <span id="priceBox">
        <p>Fall Limited Edition Sneakers</p>
        <span id="priceProduct">$125.00</span><span id="x">x</span><span id="productStack">3</span><span id="finalPrice"></span>
    </span>
<span id="productPrice">$125.00</span><span id="discount">50%</span>
    <span id="productRealPrice"><del>$250.00</del></span>
<i class='bx bx-cart-alt' onclick="seeCart()"><span id="cartCounter">0</span></i>

解决办法 #

1. 问题根源
   parseInt()会从字符串第一个字符开始解析，价格字符串$125.00以$开头，不是数字，所以直接返回NaN，导致后续相乘结果也是NaN。

2. 修改步骤

• 处理价格：先移除$符号，再用parseFloat()（保留小数精度）转换为数值
• 处理数量：直接用parseInt()，同时清理文本中可能存在的空格，避免意外问题

3. 修改后的代码

// 获取元素文本内容
let priceText = document.getElementById("productPrice").textContent;
let stackText = document.getElementById("cartCounter").textContent;

// 清理价格字符串并转成浮点数
let price = parseFloat(priceText.replace(/\$/g, ''));
// 清理数量字符串并转成整数
let quantity = parseInt(stackText.trim(), 10);

// 计算总价，添加有效性判断避免NaN
let total = !isNaN(price) && !isNaN(quantity) ? price * quantity : 0;

// 显示结果（保留两位小数并添加$符号）
alert(total);
document.getElementById("finalPrice").innerText = `$${total.toFixed(2)}`;

内容的提问来源于stack exchange，提问作者ikianm