可变范围 JavaScript - 事件答案

【问题标题】：Variable scope JavaScript - events可变范围 JavaScript - 事件
【发布时间】：2021-05-16 20:05:13
【问题描述】：

我只有一个问题。如果我将这行代码let guess = document.querySelector(".number").value; 置于功能之外，该程序将无法为我工作。这是完整的代码：

let label = document.querySelector(".label");
document.querySelector(".button").addEventListener('click', function() {
  let number = document.querySelector(".number").value;
  label.textContent = number;
});

<button class="button">Button</button>
<input type="number" class="number">
<label class="label">label</label>

【问题讨论】：

您的代码似乎运行良好，您的问题是什么？
或者查看script标签顺序

标签： javascript function scope

【解决方案1】：

当脚本加载时，它就会被执行。因此，如果您将let number = document.querySelector(".number").value; 放在事件侦听器函数之外，它将在您的输入字段没有任何内容时执行。所以number 变量将有空字符串。每当触发各自的事件时，都会执行您的事件侦听器。所以那时你的输入字段可能有一些实际的输入。

【讨论】：

【解决方案2】：

在你的脚本中，你应该试试这个。

<script>
    window.onload = function(){
       document.querySelector(".button").onclick = function () { 
          let number = document.querySelector(".number").value;
              document.querySelector(".label").textContent = number;
       };
    }
</script>

测试：

document.querySelector(".button").onclick = function () { 
    let number = document.querySelector(".number").value;
    document.querySelector(".label").textContent = number;
};

<button class="button">Button</button>
<input type="number" class="number">
<label class="label">label</label>

【讨论】：