javascript无法初始化全局变量

Question

我是js的初学者，在进行实验时，我发现我的应用中有一些奇怪的地方：

var pin = "";
var inputField = document.querySelector('.pin'); // initialize globally 


const addNum = (num)=>{
  //let  inputField = document.querySelector(".pin"); //code works by initializing this 
  pin+=num;
  inputField.value = pin; //error hits 
}

如果我全局初始化我的inputField变量，我的应用程序会收到错误Uncaught TypeError: Cannot set property 'value' of null。但是，当我在函数中声明并初始化变量时，没有空错误，并且代码运行。如果我的变量是全局范围的，为什么会发生这种情况？