全局变量声明返回undefined，任何原因

Question

当我将输入记录到控制台时，它返回未定义但当放入匿名 function 中时，它按预期记录到控制台

我尝试了下面的代码，并希望在单击 addButton 时将 inputValue 记录到控制台，但是，记录时 inputValue 的值未定义，inputValue 的值是从输入框获取的。

`

const addButton=document.querySelector(".addButton");
let listBox=document.querySelector(".listBox");
let input=document.querySelector(".addtext").value;
let inputValue=input;
addButton.addEventListener('click',()=>{
console.log(inputValue)});

</script>
</body>
</html>`

Answer 1

可能是因为这行代码在更改之前捕获了值：

let input=document.querySelector(".addtext").value;

尝试这个：

const addButton=document.querySelector(".addButton");
let listBox=document.querySelector(".listBox");
let input=document.querySelector(".addtext");
addButton.addEventListener('click',()=>{
console.log(input.value)});

Answer 2

这是我根据您的示例创建的一些代码。 我还包括一个用于演示的代码笔。

关键字let没有被提升，限制在 scope。用var定义的变量被提升，意味着它们被带到脚本的顶部，并在浏览器处理 JS 文件时首先执行。

这是我的代码，我将所有针对控件的变量设为const 。

然后我在事件处理程序中引用value属性。

<div>
    <select class="listBox">
        <option value="a"> Option A </option>
        <option value="b"> Option B </option>
        <option value="c"> Option C </option>
    </select>
    <input type="text" class="addtext" />  
    <button class="addButton"> Add </button>
</div>

这是JS代码：

const addButton=document.querySelector(".addButton");
const listBox=document.querySelector(".listBox");
const input=document.querySelector(".addtext");
addButton.addEventListener('click',() => {
  console.log(input.value)
});

https://codepen.io/glennferrie/pen/gOjeQNx