局部变量在 JS 中没有按预期工作[关闭]答案

【问题标题】：Local Variable not working as expected in JS [closed]局部变量在 JS 中没有按预期工作[关闭]
【发布时间】：2023-01-22 23:07:47
【问题描述】：

我是 JavaScript 的初学者。我正在尝试使用 querySelector 将输入的值从 HTML 文件获取到 .js 文件。据我所知，querySelectors 返回一个引用。所以每当我使用 form.reset() 时，一切都会重置。但是因为我做了一个局部变量一世存储输入的值，为什么 form.reset() 擦除存储在局部变量中的值一世？

我期待输入的价值，但我得到“空字符串“在控制台中。

const fo = document.querySelector('form') // 'form' is an element in my HTML file
const input = document.querySelector('#add_name'); // #add_name is an id of input element in my HTML file
var i = input.value; // since querySelector return a reference object so i tried to store input's value in local variable
fo.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log(input.value); // prints the input value
  fo.reset(); //since querySelector returns an object and so "input" is a reference variable so it also get erased 
  console.log(i); // prints <empty string> WHY???
  // Argument: i have used local variable i
})

<form id="form">
<input id="add_name" type="text" />
<input type="submit" />
</form>

【问题讨论】：

欢迎来到堆栈溢出！请带上tour，四处看看，通读help center，特别是How do I ask a good question? 请贴出代码、错误消息、标记、数据结构和其他文本信息作为文本, 不只是作为图片文本。为什么：meta.stackoverflow.com/q/285551/157247
在重置之前将 var i = input.value; 移入事件处理程序
可能是因为 input.value 和 i 引用了同一个对象，通过擦除 input.value，您也擦除了 i。

标签： javascript html

【解决方案1】：

form.reset() 擦除存储在局部变量 i 中的值的原因是因为当您调用 form.reset() 时，它会重置表单中的所有值，包括存储对这些值的引用的任何变量值。局部变量 i 仍然引用相同的值，但由于它已被重置，它现在将有一个空字符串作为其值。

【讨论】：