收银找零程序Bug修复请求：小数处理、找零显示等问题

API 探路者

2026-8-4

收银找零程序问题修复方案

问题描述

我正在开发一款收银找零程序，需计算并返回顾客的找零金额及对应纸币、硬币数量，目前程序存在以下问题：

账单金额大于现金时可正常提示差额，但无法处理小数金额（如10.25€）；
现金大于账单时，仅能显示纸币数量但不识别小数，且未展示找零总金额；
现金与账单金额相等时，未显示“Exact amount. No change.”提示。

原代码

JavaScript代码

/* Declaring all the variables required */
const totalPrice = document.querySelector("#bill-amount")
const totalPaid = document.querySelector("#cash-amount")
const invalidInput = document.querySelector(".invalid-input")
const noteTds = document.querySelectorAll("#note-values td")
const billForm = document.querySelector("#bill-form")
/* Add event listeners */
billForm.addEventListener("submit", handleFormSubmission)

/*Add functions */
function handleFormSubmission(event) {
  event.preventDefault()
  validateCashAndFillTable(totalPrice.value, totalPaid.value)
}

function validateCashAndFillTable(totalPrice, totalPaid) {
  const {message, result} = validateAmounts(totalPrice, totalPaid)
  if (!result) {
    printError(message);
    return;
  }
  const change = (totalPaid - totalPrice)
  const notes = [50, 20, 10, 5, 2, 1, 0.50, 0.25, 0.20, 0.10, 0.05, 0.02, 0.01]

    if (change > 0) fillTableWithNotes (notes, change) 
    return {
      message: `Customer change is ${result}`
    }
}

function fillTableWithNotes (notes, change) {
  for (let index =0; index < notes.length; index++) {
    const notesNumber = parseInt(change / notes[index])
    change = change % notes [index]
    noteTds[index].innerText = notesNumber;
    if (change === 0) 
    return{
      message: `Exact amount. No change.`
    }
  }
}

function printError(message) {
  invalidInput.innerText = message
  invalidInput.classList.add("active")
}

function validateAmounts (totalPrice, totalPaid)  {
  if(!isNaN(totalPaid) && !isNaN(totalPrice)) {
    if (parseInt(totalPrice, 10) > parseInt(totalPaid, 10)){
      return{
        message: `Insufficient founds, please add ${totalPrice - totalPaid}€`,
        result : false,
      }
    }
    return {
      message: "",
      result: true,
    };
  }

}

HTML代码

<body>
    <div class="container">
        <main>
            <section class="content">
                <h1> Cash Register </h1>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis, aliquam.
                </p>
            </section>
            <form id="bill-form">
                <div class="form-group">
                    <label for="" id="label-form">Bill Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="bill_amount"
                    id="bill-amount"
                    placeholder="0.0"
                    pattern="[0-9]+"
                    required />
                </div>
                <div class="form-group">
                    <label for="" id="label-form">Cash Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="cash_amount"
                    id="cash-amount"
                    placeholder="0.0"
                    pattern="[0-9]+"
                    required />
                </div>
                <div class="form-group">
                    <button type="submit">Calculate</button>
                </div>
            </form>
            <p class="invalid-input">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, laudantium!
            </p>
            <section class="output">
                <h2>Customer Change:</h2>
                <p class="result"></p>
                <table class="notes">
                    <tbody>
                        <tr id="note-values">
                            <th>Quantity of Notes</th>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <th>Notes</th>
                            <td>50€</td>
                            <td>20€</td>
                            <td>10€</td>
                            <td>5€</td>
                            <td>2€</td>
                            <td>1€</td>
                            <td>0.50€</td>                            
                            <td>0.25€</td>
                            <td>0.20€</td>
                            <td>0.10€</td>
                            <td>0.05€</td>
                            <td>0.02€</td>
                            <td>0.01€</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>
    </div>
    
</body>

修复方案及修改说明

1. 解决小数金额处理问题

替换parseInt()为parseFloat()进行金额转换，避免截断小数部分；
将金额乘以100转换为分（整数）运算，规避浮点精度误差，计算完成后再转换回欧元单位。

2. 展示找零总金额

新增获取页面.result元素的代码，在计算出找零后更新该元素内容，显示格式化后的总找零金额。

3. 补充金额相等时的提示

在validateCashAndFillTable函数中添加change === 0判断分支，直接在.result元素中显示指定提示文本。

4. 优化输入框设置

修改输入框pattern属性为[0-9]+(\.[0-9]+)?，支持小数输入；
添加step="0.01"属性，确保输入金额精度符合欧元最小单位要求。

5. 重置状态

表单提交时重置错误提示、结果显示及表格数量，避免上次计算结果残留。

修改后的完整代码

JavaScript代码

/* Declaring all the variables required */
const totalPrice = document.querySelector("#bill-amount")
const totalPaid = document.querySelector("#cash-amount")
const invalidInput = document.querySelector(".invalid-input")
const noteTds = document.querySelectorAll("#note-values td")
const billForm = document.querySelector("#bill-form")
const resultDisplay = document.querySelector(".result") // 获取结果展示元素
/* Add event listeners */
billForm.addEventListener("submit", handleFormSubmission)

/*Add functions */
function handleFormSubmission(event) {
  event.preventDefault()
  // 重置所有状态
  invalidInput.innerText = ""
  invalidInput.classList.remove("active")
  resultDisplay.innerText = ""
  noteTds.forEach(td => td.innerText = "0")
  
  validateCashAndFillTable(totalPrice.value, totalPaid.value)
}

function validateCashAndFillTable(totalPrice, totalPaid) {
  const {message, result} = validateAmounts(totalPrice, totalPaid)
  if (!result) {
    printError(message);
    return;
  }
  
  // 转换为浮点数值
  const price = parseFloat(totalPrice)
  const paid = parseFloat(totalPaid)
  const change = paid - price

  const notes = [50, 20, 10, 5, 2, 1, 0.50, 0.25, 0.20, 0.10, 0.05, 0.02, 0.01]

  if (change > 0) {
    // 显示总找零金额
    resultDisplay.innerText = `总找零：${change.toFixed(2)}€`
    fillTableWithNotes(notes, change)
  } else if (change === 0) {
    // 金额相等时的提示
    resultDisplay.innerText = "Exact amount. No change."
  }
}

function fillTableWithNotes(notes, change) {
  // 转换为分处理，避免浮点精度问题
  let remainingChange = Math.round(change * 100)
  for (let index = 0; index < notes.length; index++) {
    const noteValue = Math.round(notes[index] * 100)
    const notesNumber = Math.floor(remainingChange / noteValue)
    remainingChange = remainingChange % noteValue
    noteTds[index].innerText = notesNumber
    if (remainingChange === 0) break
  }
}

function printError(message) {
  invalidInput.innerText = message
  invalidInput.classList.add("active")
}

function validateAmounts(totalPrice, totalPaid) {
  const price = parseFloat(totalPrice)
  const paid = parseFloat(totalPaid)
  
  if(!isNaN(paid) && !isNaN(price)) {
    if (price > paid) {
      return {
        message: `金额不足，请补充${(price - paid).toFixed(2)}€`,
        result : false,
      }
    }
    return {
      message: "",
      result: true,
    };
  } else {
    return {
      message: "请输入有效的数字金额",
      result: false
    }
  }
}

HTML代码

<body>
    <div class="container">
        <main>
            <section class="content">
                <h1> Cash Register </h1>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis, aliquam.
                </p>
            </section>
            <form id="bill-form">
                <div class="form-group">
                    <label for="" id="label-form">Bill Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="bill_amount"
                    id="bill-amount"
                    placeholder="0.0"
                    pattern="[0-9]+(\.[0-9]+)?"
                    step="0.01"
                    required />
                </div>
                <div class="form-group">
                    <label for="" id="label-form">Cash Amount</label>
                    <label for="" id="euro">€</label>
                    <input
                    type="number"
                    name="cash_amount"
                    id="cash-amount"
                    placeholder="0.0"
                    pattern="[0-9]+(\.[0-9]+)?"
                    step="0.01"
                    required />
                </div>
                <div class="form-group">
                    <button type="submit">Calculate</button>
                </div>
            </form>
            <p class="invalid-input">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, laudantium!
            </p>
            <section class="output">
                <h2>Customer Change:</h2>
                <p class="result"></p>
                <table class="notes">
                    <tbody>
                        <tr id="note-values">
                            <th>Quantity of Notes</th>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <th>Notes</th>
                            <td>50€</td>
                            <td>20€</td>
                            <td>10€</td>
                            <td>5€</td>
                            <td>2€</td>
                            <td>1€</td>
                            <td>0.50€</td>                            
                            <td>0.25€</td>
                            <td>0.20€</td>
                            <td>0.10€</td>
                            <td>0.05€</td>
                            <td>0.02€</td>
                            <td>0.01€</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>
    </div>
    
</body>

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

收银找零程序Bug修复请求：小数处理、找零显示等问题

问题描述 #

原代码 #

JavaScript代码

HTML代码

修复方案及修改说明 #

1. 解决小数金额处理问题

2. 展示找零总金额

3. 补充金额相等时的提示

4. 优化输入框设置

5. 重置状态

修改后的完整代码 #

JavaScript代码

HTML代码

问题描述

原代码

修复方案及修改说明

修改后的完整代码