为什么我的 addEventListener 函数在本地为变量赋值，而不是全局？答案

【问题标题】：Why does my addEventListener function assign a value to a variable locally, but not globally?为什么我的 addEventListener 函数在本地为变量赋值，而不是全局？
【发布时间】：2021-01-26 14:43:19
【问题描述】：

我正在尝试用 Javascript、HTML 和 CSS 编写一个应用程序，在其中我通过输入字段从用户那里获取信息并将其保存到稍后使用的变量中。我在脚本的开头分配了空的全局变量，然后应该在事件侦听器函数运行时重新分配这些变量。通过从函数内部和外部登录到控制台，我可以看到用户输入被分配给了函数内部的变量，而不是函数外部。

示例代码：

let inputName;

const person = document.getElementById('person');

function getName() {
  inputName = person.value;  
//if console.log(inputName) is here, the assigned value for inputName will be logged to the console
};

person.addEventListener('change', getName);
//if console.log(inputName) is anywhere outside of getName(), the value will not appear on the console

加上对应的HTML：

<div>
   <label for='person'>What is your name?</label>
   <br>
   <input type='text' id='person' placeholder='John Doe' required>
</div>

我已经尝试了各种变体，但仍然没有找到解决方案；关于如何修复/重写此问题的任何想法？

【问题讨论】：

什么时候调用getName？为什么你会期望第二个日志语句已经分配了一个值？
我认为它工作正常。我正在添加setTimeout(() => console.log(inputName), 5000);，我看到了来自change 事件侦听器之外的值记录。
已编辑帖子以更清晰。
随意删除。

标签： javascript function dom scope event-listener

【解决方案1】：

好的，我想通了。很想因为尴尬而删除线程，但会继续保持下去，因为我想我不是唯一一个被这种事情蒙蔽了双眼的新手......

简而言之，最近才接触到事件监听器，我忽略了脚本的运行速度比我在输入字段中输入名称的速度要快得多，因此会运行 console.log() 很多早于我希望运行事件监听器函数来分配一个值，无论我在哪里输入 console.log()... Facepalm！无论如何，它看起来像 @JakeAve 调用它 - 我一定会记得在未来使用 setTimeOut() 来解决这类事情，这是一个巧妙的策略。

感谢大家抽出宝贵时间提供帮助 - 非常感谢！

【讨论】：

这毫无意义。如果您的代码紧跟在输入字段之后，则分配事件处理程序的速度将比您开始输入的速度更快。您向我们展示的代码中缺少一些基本内容。