如何将HTML输入框的用户输入值赋值给JavaScript变量price？

你的问题出在变量赋值的时机和取值逻辑上：

• 页面刚加载时就执行let price = document.getElementById('price').value;，这时候用户还没在输入框里填内容，所以price拿到的是空字符串（或输入框默认值），而且后续用户输入内容后，这个变量不会自动更新。
• cash只获取了DOM元素，没有取它的value属性，后续使用时也会出错。

解决步骤 #

1. 绑定按钮点击事件，在用户交互时获取最新值 #

把获取输入值的逻辑放到按钮的点击事件处理函数里，这样用户输入完点击按钮时，才能拿到最新的输入内容：

// Variables
const button = document.getElementById('button');
const returnChange = document.getElementById('return-change');
const returnStatus = document.getElementById('return-status');
const cid = [
  ['PENNY', 1.01],
  ['NICKEL', 2.05],
  ['DIME', 3.1],
  ['QUARTER', 4.25],
  ['ONE', 90],
  ['FIVE', 55],
  ['TEN', 20],
  ['TWENTY', 60],
  ['ONE HUNDRED', 100]
];

// 绑定按钮点击事件
button.addEventListener('click', function() {
  // 在点击时获取最新输入值，同时转成数字类型
  let price = parseFloat(document.getElementById('price').value);
  let cash = parseFloat(document.getElementById('payment').value);

  console.log(price);
  console.log(cash);
  console.log(cid);

  // 后续可在此编写找零逻辑
});

2. （可选）实时更新变量（无需点击按钮同步值） #

如果希望用户输入时实时更新price和cash变量，可以监听输入框的input事件：

let price = 0;
let cash = 0;

// 监听price输入框的输入事件
document.getElementById('price').addEventListener('input', function(e) {
  price = parseFloat(e.target.value) || 0; // 处理空输入，默认设为0
});

// 监听payment输入框的输入事件
document.getElementById('payment').addEventListener('input', function(e) {
  cash = parseFloat(e.target.value) || 0;
});

// 按钮点击时直接使用已更新的变量
button.addEventListener('click', function() {
  console.log(price);
  console.log(cash);
  console.log(cid);
});

3. 注意数值类型转换 #

输入框的value属性返回字符串类型，必须用parseFloat()或Number()转换成数字，否则后续计算会出现字符串拼接而非数值运算的错误。

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