为何我的函数无法获取input元素的value值？

你的问题出在变量初始化的时机：代码一开始就获取了cash的值，这时候用户还没在输入框输入内容，或者后续输入的内容不会自动更新这个变量，所以点击按钮时输出的是页面加载时的初始值——也就是undefined。

修复方法很简单，把获取输入框值的操作移到点击事件的回调函数里，这样每次点击按钮都会实时读取输入框的当前值：

const purchaseBtn = document.getElementById("purchase-btn");

purchaseBtn.addEventListener("click", () => {
  let cash = document.getElementById("cash").value;
  console.log(cash);
});

如果需要在多个地方使用输入框的值，还可以封装成一个函数，需要时调用就能拿到最新值：

function getCashInput() {
  return document.getElementById("cash").value;
}

const purchaseBtn = document.getElementById("purchase-btn");
purchaseBtn.addEventListener("click", () => {
  console.log(getCashInput());
});

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