Javascript JS document.getElementById.value工作不正常

//这不是在控制台中打印任何值（空白）——代码1

const addMovieBtn=document.getElementById（“添加电影btn”）；
const title=document.getElementById（“title”）.value；
addMovieBtn.addEventListener（“单击”，（）=>{
控制台日志（标题）；
});
最喜欢的电影
添加电影
第一个代码的问题是，在检索输入值后会注册单击事件。因此，即使单击该按钮，也会打印值为“
”
（在输入中有值之前检索输入值）的变量
title
。在第二个代码中，变量
title
不存储输入值，而是存储元素对象。因此，每次单击按钮时，第二个代码都会获取输入的当前值。
在第一个代码片段中，当加载js时，在输入为空的点处初始化
title

要实现目标，您需要在单击按钮时获取值


const addMovieBtn=document.getElementById（“添加电影btn”）；
让title=document.getElementById（“title”）.value；
addMovieBtn.addEventListener（“单击”，（）=>{
title=document.getElementById（“title”）.value；
控制台日志（标题）；
});
最喜欢的电影
Add Movie
在第一段代码中，您从输入中访问的值为空，因为加载DOM时代码运行，此时输入框仍然为空。当您试图获取输入的值时。即使您输入一些内容并单击按钮，也无法更新，因为该值已存储在变量中。无法更新该值，因为该值对更改没有反应

在第二段代码中，您在变量中存储了输入元素的引用，而不是它的值，然后在单击按钮时访问该值。因此，
值
已经填充了输入框的内容（显然，除非用户在没有输入任何值的情况下单击按钮）

这是一个话题之外的话题，但这正是被动数据/状态的概念开始发挥作用的时候。如果您曾经使用过React、Vue、Angular或任何支持它的框架，那么您应该听说过这一点。这基本上意味着，当输入元素的值发生变化时，变量的值也会发生变化（在本例中）（这并不是它的确切含义）。以下是Vue.js文档的摘录：

每个[Vue]组件实例都有一个对应的观察者实例，它将组件渲染期间“接触”的所有属性记录为依赖项。稍后，当一个依赖项的setter被触发时，它会通知观察者，从而导致[Vue]组件重新呈现

“第一个代码（代码1）也应该是工作，对吗？”不，不是。它先获取输入值，然后再获取输入值。然后它总是打印空值。第二个代码每次都会获取输入的当前值。感谢大家的宝贵回复。我现在理解了这两段代码之间的区别。我还在学习vanilla JS，还没有深入到任何框架中。很高兴知道这一点，谢谢。