为何document.getElementById.value失效？求技术解答

嘿，这个问题其实是JavaScript里很常见的变量时机误区，咱们一步步拆解你遇到的问题：

先看Code 1的问题根源 #

你在页面加载完成时就直接获取了input的value：

const addMovieBtn = document.getElementById("add-movie-btn");
// 这里！页面刚加载时，input还没有用户输入，所以title被赋值为空字符串
const title = document.getElementById("title").value;
addMovieBtn.addEventListener("click", () => {
  // 点击按钮时，打印的是页面加载时保存的那个空值，不会重新读取input的最新内容
  console.log(title);
});

title变量在这里是一个静态的字符串快照，一旦赋值就固定了，后续用户输入的内容不会自动更新到这个变量里。

再看Code 2为什么能正常工作 #

你在Code 2里保存的是input元素本身的引用，而不是它的value：

const addMovieBtn = document.getElementById("add-movie-btn");
// 这里只是存储了input元素的引用，没有读取value
var title = document.getElementById("title");
addMovieBtn.addEventListener("click", () => {
  // 点击按钮时才实时读取这个元素的当前value，所以能拿到用户输入的最新内容
  console.log(title.value);
});

每次点击时，都会去访问元素的value属性，这时候拿到的是用户输入后的最新值。

你遗漏的核心点 #

你混淆了**“获取静态值”和“保存元素引用”**的区别：

• 当你直接取.value时，得到的是当前时刻的字符串值，后续不会自动更新
• 当你保存元素引用时，每次访问.value都会实时获取元素的当前状态

修正Code 1的两种方案 #

1. 把获取value的逻辑放到点击事件内部，每次点击时实时读取：

const addMovieBtn = document.getElementById("add-movie-btn");
addMovieBtn.addEventListener("click", () => {
  const title = document.getElementById("title").value;
  console.log(title);
});

2. 保存元素引用（推荐用const，因为元素引用不会改变）：

const addMovieBtn = document.getElementById("add-movie-btn");
const titleInput = document.getElementById("title"); // 变量名更清晰，避免歧义
addMovieBtn.addEventListener("click", () => {
  console.log(titleInput.value);
});

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