在函数外部声明的全局变量不起作用

Question

当我在函数程序之外获取数字值 (document.getelementbyid('number')) 时无法正常工作 - 程序一直显示 Fizz。这是我的代码

var number = document.getElementById("number").value;
var button = document.getElementById('button');

button.addEventListener('click', function() {
    if (number % 3 === 0) {
        alert('Fizz');
    } else if(number  % 5 === 0) {
        alert('Buzz');
    } else {
        console.log('..');
    }
})

<input type="number" id="number">
<button id="button">+</button>

请问是不是变量作用域有问题？但据我所知，在函数外部声明的变量应该在函数内部可用，因为它是全局的。

Answer 1

这与变量或其范围无关，而与您为该变量设置的值有关：

document.getElementById("number").value

当页面首次加载且 JavaScript 首次执行时，输入中 没有值 。所以没有值设置给变量。但是当点击事件执行它的处理函数时，大概是用户已经在输入中输入了一个值。

如果您愿意，可以为输入设置一个默认值：

<input type="number" id="number" value="1">

然后，如果您在页面首次加载时获得该值，它将是 "1"。当然，如果你想获取用户输入的值，你仍然需要在需要时获取它。

基本上，在用户输入该值之前，您无法从用户那里获取值。

在函数外部声明的全局变量不起作用

Global variable declared outside function doesn't work

javascript

scope

global-variables

local-variables