为何我的JavaScript代码在第二种场景可运行，第一种场景却失效？

CASE1 代码 #

let tem=document.getElementById('timed').value
let timeBtn=document.getElementById('timed_input');
timeBtn.addEventListener('click',()=>{
    console.log(tem);
})

CASE2 代码 #

let timeBtn=document.getElementById('timed_input');
timeBtn.addEventListener('click',()=>{
    console.log(document.getElementById('timed').value);
})

核心差异：值的获取时机 #

• CASE1 里，tem变量在页面加载完成、代码执行的瞬间就获取了#timed输入框的初始值。这个值会被存在变量里固定下来，后续用户修改输入框内容时，tem不会自动同步更新。点击按钮时输出的是这个旧的初始值，所以不符合获取最新输入内容的预期。
• CASE2 里，document.getElementById('timed').value是在按钮点击事件触发时才执行的，每次点击都会实时去输入框里取当前的最新值，因此能输出用户刚输入的内容，符合预期。

修复CASE1的方案 #

如果想保留变量的写法，把tem改成一个函数，每次点击时调用函数获取最新值：

const getTimedValue = () => document.getElementById('timed').value;
let timeBtn=document.getElementById('timed_input');
timeBtn.addEventListener('click',()=>{
    console.log(getTimedValue());
})

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