收银台网页功能实现遇阻，请求技术指导

代码中的核心问题及修改方向 #

• 输入值获取错误：你直接获取了输入框DOM元素，而非用户输入的数值。需要通过.value属性提取输入内容，并转换为数字类型（如parseFloat()），否则checkCashRegister函数会收到无效参数。
• 事件绑定错误：button.onClick = cashRegisterFunction();中的括号会直接执行函数，而非绑定点击触发逻辑。同时注意事件名是小写的onclick，而非驼峰式的onClick。
• 结果展示错误：checkCashRegister返回的是对象，直接赋值给innerHTML会显示[object Object]，需要将对象转为可读字符串或自定义格式展示。

修改后的代码示例 #

// 先确保获取到正确的DOM元素
const priceInput = document.getElementById('price');
const cashInput = document.getElementById('payment');
const returnElement = document.getElementById('return');
const button = document.getElementById('cash-btn'); // 替换为你按钮的实际ID

// cid 已声明
const cashRegisterFunction = () => {
  // 提取输入值并转为数字
  const price = parseFloat(priceInput.value);
  const cash = parseFloat(cashInput.value);

  // 基础输入验证
  if (isNaN(price) || isNaN(cash) || price < 0 || cash < price) {
    returnElement.innerHTML = '请输入有效的价格和付款金额，且付款金额需大于等于价格';
    return;
  }

  const result = checkCashRegister(price, cash, cid);

  // 自定义结果展示格式，替代直接转JSON
  let displayContent = '';
  switch(result.status) {
    case 'INSUFFICIENT_FUNDS':
      displayContent = `状态：${result.status}<br>无法提供足额找零`;
      break;
    case 'CLOSED':
      displayContent = `状态：${result.status}<br>收银机已关闭，剩余现金：<br>${result.change.map(item => `${item[0]}: $${item[1]}`).join('<br>')}`;
      break;
    case 'OPEN':
      displayContent = `状态：${result.status}<br>找零明细：<br>${result.change.map(item => `${item[0]}: $${item[1]}`).join('<br>')}`;
      break;
  }
  returnElement.innerHTML = displayContent;
}

// 正确绑定点击事件，不要加括号
button.onclick = cashRegisterFunction;

额外注意事项 #

• 确保HTML中的按钮元素有明确的ID，且JS代码能正确获取到该元素，避免出现button is undefined的报错。
• 可以给输入框添加type="number"属性，限制用户只能输入数字，减少无效输入的情况。

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