document.getElementById.value失效咨询：两段JS代码为何执行结果不同？

嘿，这个问题其实是变量赋值的时机在搞怪，我来给你理清楚其中的差别～

代码1的问题所在 #

先看你的第一段代码：

// This is not printing any value in the console (blank) -- code 1
const addMovieBtn = document.getElementById("add-movie-btn");
const title = document.getElementById("title").value; // 关键在这里！
addMovieBtn.addEventListener("click", () => {
 console.log(title);
});

当页面加载完成后，这行const title = document.getElementById("title").value;就立刻执行了——这时候你的输入框刚渲染出来，还没有任何用户输入，所以value是空字符串。

之后你点击按钮时，回调函数里打印的只是一开始就存好的那个空值，完全没有去读取输入框当前的最新内容。

代码2为什么能正常工作 #

再看第二段代码：

//This is working fine -- code 2
const addMovieBtn = document.getElementById("add-movie-btn");
var title = document.getElementById("title"); // 这里存的是DOM元素本身
addMovieBtn.addEventListener("click", () => {
 console.log(title.value); // 点击时才读取当前value
});

这里的title变量存储的是整个input DOM元素对象，而不是它的value属性。当你点击按钮触发回调时，才会去访问title.value，这时候拿到的就是用户输入后的最新值了，自然能正常输出。

优化建议 #

如果你想保持类似代码1的写法，只需要把获取value的操作移到点击事件的回调里即可：

const addMovieBtn = document.getElementById("add-movie-btn");
addMovieBtn.addEventListener("click", () => {
 const title = document.getElementById("title").value; // 点击时再获取最新值
 console.log(title);
});

或者像代码2那样，先缓存DOM元素，点击时再读取value——这种方式还能避免重复调用getElementById，性能更优哦。

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