如果我将输入值存储在变量中，为啥我的输入值总是空的？

Posted 2023-03-07

【中文标题】如果我将输入值存储在变量中，为啥我的输入值总是空的？

【英文标题】：Why is the value of my input always empty if I store it in a variable?如果我将输入值存储在变量中，为什么我的输入值总是空的？

【发布时间】：2022-01-21 19:23:20

【问题描述】：

我正在尝试从我的 <input> 字段中获取 value 属性，以便以后可以使用它从特定的 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）。

【问题讨论】：

一个关键点要知道：当你分配一个变量时，它永远不会改变它的值，除非你重新分配它。但是字符串（以及数字、布尔值、null、未定义、符号和大整数）是原始值，并且所有这些都是不可变的，因此如果字符串的“原始引用”在其他地方改变了值，则字符串永远不会在变量中神奇地改变。然而，对象（和函数）不是原语；它们的“值”是一个固定的引用，它也永远不会改变，但这个引用就像一个指向其他值的地址 — 而这个“引用其他值”可以改变。

【参考方案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);