JavaScript表单输入未读取问题：找零计算器故障排查

我帮你定位到了代码里的几个关键问题，正是这些问题导致输入框输入数值时程序无法正常执行：

1. 全局变量初始化时机错误 #

你在页面加载时就初始化了remainder和finalOutput：

let remainder = parseFloat(cash.value) - parseFloat(itemCost.value);
let finalOutput = new Array();

这时候输入框还没有用户输入，cash.value和itemCost.value是空字符串，转成浮点数后得到NaN，所以remainder的值是NaN。当后续调用calculateChange时，基于NaN的循环逻辑完全无法正常运行。而你硬编码数值时，是在全局作用域直接修改了输入框的值，这时候remainder会基于硬编码的数值计算，所以能正常工作。

2. 缺少状态重置逻辑 #

每次点击「Confirm」按钮时，你没有重置remainder和finalOutput的状态。如果用户多次操作，旧的计算结果会累积到finalOutput数组里，导致输出混乱。

3. 重复创建Confirm按钮 #

每次点击「Enter」按钮，都会创建一个新的Confirm按钮，页面上会出现多个重复按钮，影响交互体验。

修正后的完整代码 #

下面是修复了以上问题的代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Change calculator</title>
</head>
<body>
<form>
    How much does the item cost?
    <input type="number" id="price" name ="price" step="0.01"/>
    <br/>
    <br/>
    How much cash do you have?
    <input type="number" id="cash" name="cash" step="0.01"/><br/>
    <br/>
    <input type="button" value="Enter" onclick="confirmItems();"/>
</form>
<p id="confirmation"></p>
<p id ="change"></p>
</body>
<script>
var itemCost = document.getElementById("price");
var cash = document.getElementById("cash");
var confirmation = document.getElementById("confirmation");
let changeEl = document.getElementById("change");

function confirmItems() {
    // 先清空之前的确认内容和按钮
    confirmation.innerHTML = "Your total purchase costs $" + itemCost.value + " and you have $" + cash.value + " to pay for it.";
    createConfirmationBtn();
}

function createConfirmationBtn() {
    // 先检查是否已有Confirm按钮，避免重复创建
    const existingBtn = confirmation.querySelector("button");
    if (existingBtn) {
        existingBtn.remove();
    }
    let confirmationBtn = document.createElement("BUTTON");
    const confirmationBtnText = document.createTextNode("Confirm");
    confirmationBtn.appendChild(confirmationBtnText);
    confirmation.appendChild(confirmationBtn);
    confirmationBtn.onclick = function() {
        confirmValues();
    }
}

function confirmValues() {
    const cost = parseFloat(itemCost.value);
    const paid = parseFloat(cash.value);
    
    // 先清空之前的找零结果
    changeEl.innerHTML = "";
    
    if (isNaN(cost) || isNaN(paid)) {
        changeEl.innerHTML = "请输入有效的数值";
        return;
    }
    
    if (paid < cost) {
        changeEl.innerHTML = "Not enough cash";
    } else if (paid === cost) {
        changeEl.innerHTML = "Your change is $0.";
    } else {
        // 初始化本次计算的变量
        let remainder = paid - cost;
        let finalOutput = [];
        calculateChange(remainder, finalOutput);
        changeEl.innerHTML = finalOutput.join(" ");
    }
}

function calculateChange(remainder, finalOutput) {
    while (remainder > 0.001) { // 用0.001避免浮点数精度问题
        if (remainder >= 100) {
            findChange(100.00, remainder, finalOutput);
        } else if (remainder >= 50.00) {
            findChange(50.00, remainder, finalOutput);
        } else if (remainder >= 20.00) {
            findChange(20.00, remainder, finalOutput);
        } else if (remainder >= 10.00) {
            findChange(10.00, remainder, finalOutput);
        } else if(remainder >= 5.00) {
            findChange(5.00, remainder, finalOutput);
        } else if (remainder >= 1.00) {
            findChange(1.00, remainder, finalOutput);
        } else if (remainder >= 0.25) {
            findChange(0.25, remainder, finalOutput);
        } else if (remainder >= 0.10) {
            findChange(0.10, remainder, finalOutput);
        } else if (remainder >= 0.05) {
            findChange(0.05, remainder, finalOutput);
        } else {
            findChange(0.01, remainder, finalOutput);
        }
        // 更新remainder的值
        const lastEntry = finalOutput[finalOutput.length-1];
        const denomination = parseFloat(lastEntry.match(/\d+\.?\d*/)[0]);
        const count = parseInt(lastEntry.match(/x\d+/)[0].slice(1));
        remainder = parseFloat((remainder - (denomination * count)).toFixed(2));
    }
}

function findChange(value, remainder, finalOutput) {
    let dValue = parseInt(remainder / value);
    finalOutput.push("[$" + value + " x" + dValue+"]");
}
</script>

额外优化点 #

• 给输入框添加了step="0.01"，方便用户输入小数金额
• 增加了数值有效性检查，避免用户输入非数字内容导致报错
• 优化了浮点数精度处理，用0.001作为循环终止条件，避免因为浮点数精度问题导致死循环
• 将remainder和finalOutput改为局部变量，通过参数传递，避免全局状态污染

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