自制简易计算器代码出现NaN错误及undefined结果，求优化建议

核心错误原因 #

• 直接对DOM元素（items和price）执行乘法运算，而非获取输入框的value值，导致计算结果为NaN
• 页面加载时就提前计算finalPrice，此时输入框为空，且未正确取值，直接触发无效运算
• 函数中错误访问finalPrice.value，finalPrice是NaN，不存在value属性，所以显示undefined
• 使用innerHTML +=会重复累加结果，每次点击按钮都会在原有结果后追加，不符合计算器逻辑

修复后的完整代码 #

<div>
    <h1>练习</h1>
    <h4>商品计算器</h4>
    <p>输入数量</p>
    <input type="number" id="numberitems">
    <p>输入单价</p>
    <input type="number" id="priceitems">
    <br><br>
    <button id="pricebtn">计算总价</button>
    <br>
    <p>结果</p>
    <span id="finalPrice"></span>
</div>

<script>
    // 获取DOM元素
    const itemsInput = document.getElementById("numberitems");
    const priceInput = document.getElementById("priceitems");
    const btnPrice = document.getElementById("pricebtn");
    const finalPriceEl = document.getElementById("finalPrice");

    function calculateTotal() {
        // 获取输入值并转换为数字，默认值设为0避免空值报错
        const itemCount = Number(itemsInput.value) || 0;
        const unitPrice = Number(priceInput.value) || 0;
        // 计算总价
        const finalPrice = itemCount * unitPrice;
        // 更新页面结果
        finalPriceEl.textContent = finalPrice;
        // 控制台输出结果
        console.log(finalPrice);
    }

    // 绑定点击事件
    btnPrice.addEventListener("click", calculateTotal);
</script>

优化说明 #

• 变量名语义化：将items改为itemsInput，明确标识是输入框元素，提升代码可读性
• 延迟计算：仅在点击按钮时才获取输入值并执行计算，避免页面加载时的无效运算
• 类型转换与容错：用Number()转换输入值，配合|| 0处理空输入或非数字输入的情况，防止出现NaN
• 使用textContent替代innerHTML：仅更新文本内容更安全，避免不必要的DOM解析和XSS风险
• 缓存DOM元素：提前获取结果显示元素，避免每次函数调用时重复查询DOM，提升性能

内容的提问来源于stack exchange，提问作者Gustavo López