无法使用 Javascript 将全局变量分配给下拉更改事件

Question

我看到这个问题的变体已经被问过好几次了，但不幸的是，没有一个解决方案对我有用。 我仍然是 JavaScript 的初学者，因此我不确定这里发生了什么来正确调试以及在文档中究竟要阅读什么。

基本上，我想在更改事件处理程序中访问和存储下拉列表的选定值。

在我目前的方法中，我能够output事件处理程序中的更改事件。 但是我似乎无法将它分配给它之外的全局变量，这是我代码中其他部分所需要的。

这是我的 MWE：

let dd = document.getElementById('dropDownMenu')
let dropDownChoice;

dd.addEventListener('change', function(e){
  dropDownChoice = e.target.value;
  console.log(dropDownChoice); // This outputs the selected item whenever the drop down is changed
});

console.log(dropDownChoice) // This does not output anything

Answer 1

它不会输出任何内容，因为在您进行选择之前执行了该行。 如果您添加一个按钮并在 select 之后单击它来调用 function，您将看到该值存在：

document.querySelector('button').addEventListener('click', () => console.log(dropDownChoice))