为什么我的输入值如果存储在一个变量中，总是为空？

Question

我试图获取 value 我的财产 <input> 字段，这样我以后就可以用它从一个特定的API URL中获取数据。

问题是，我的 <input> 无论我输入什么，值总是空的。

我试着用 document.querySelector() 和 document.getElementById()两者的结果是一样的。

const searchBtn = document.querySelector("#searchBtn");
//const inpuValue = document.querySelector("#inputField").value;
const inputValue = (document.getElementById("inputField")).value;
const testing = () => alert(inputValue);

searchBtn.addEventListener("click", testing);

警报只是显示空白，但如果我在HTML字段中指定了一个值就不会了。所以我想我触发了正确的按钮和 <input> 领域。(我用的是 alert 因为我的浏览器都没有显示 console.log 在控制台中）。)

Answer 1

价值总是空的，不管是什么... testing 函数处理程序在每次点击按钮时被调用。

与此相反， inputValue 变量只在代码第一次执行时被评估一次，即在页面加载时的初始脚本评估时，而不是再次评估。输入的值被存储在变量中，之后就不会再被更新。(在JavaScript中，字符串是不可改变的：一旦你把一个字符串存储在一个变量中，它就不会改变，除非你把这个变量分配给另一个值。)

如果你想在每次点击按钮时刷新值，你必须每次都查询元素。

const testing = () => {
  const inputValue = document.getElementById("inputField").value;

  alert(inputValue);
}

或者你也可以只保留一个元素的引用，然后再查询 value 每次都会有属性。

const inputElement = document.getElementById("inputField");
const testing = () => alert(inputElement.value);