您可以使用以下选项：

let nums=document.getElementsByClassName("grid-items");
var i=0,num=0;
for(i=0;i<nums.length;i++){
    console.log(nums[i]);
    nums[i].addEventListener("click", function (){
        num=this.innerHTML;
        console.log(num);
    })    
}

单击处理程序使用变量 i 从全局范围，在单击时（循环完成时），此变量指向数组边界的后面，这会导致异常。
但是如果你把这个变量 i 本地到循环体，则每个处理程序都有自己的 i 具有特定于每个迭代的值。

let nums = document.getElementsByClassName("grid-items")
for (let i = 0; i < nums.length; i++) {
  nums[i].addEventListener("click", function() {
    console.log(nums[i].innerHTML)
  })
}

<button class="grid-items" id="number0">0</button>
<button class="grid-items" id="number1">1</button>
<button class="grid-items" id="number2">2</button>
<button class="grid-items" id="number3">3</button>
<button class="grid-items" id="number4">4</button>
<button class="grid-items" id="number5">5</button>
<button class="grid-items" id="number6">6</button>
<button class="grid-items" id="number7">7</button>
<button class="grid-items" id="number8">8</button>
<button class="grid-items" id="number9">9</button>

注意使用 let 而不是 var ，因为 var 具有更大的范围，不会是局部循环。

你可以用 forEach 循环以最小化代码并使其更干净。
请参见=>

let nums = document.querySelectorAll(".grid-items");
nums.forEach(element =>{
   element.onclick = (e)=>{
     console.log(parseInt(element.textContent))
   }})

注：我用过 parseInt() 方法从返回的字符串中解析整数 .innerText