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

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第一次执行时，在输入中没有值。所以没有为变量设置任何值。但是当click事件执行其处理函数时，假定用户已经在输入中键入了一个值。

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

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

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

基本上你不能从用户那里得到值，直到用户输入了那个值。