Правильно, должно выводиться 3, так как при компиляции кода for выполняется 3 раза, и 3 раза добавляется на кнопку событие клика. После выполнения всех итерация i будет равна последнему значению и при клике оно показывается, так как при клике for не срабатывает, т.к он не в функции клика и выполняется при компиляции.
Так-же замените это:
const button = document.getElementById('button');
На современный способ:
const button = document.querySelector('#button');
И вот это:
button.addEventListener('click', function (e){
console.log(i);
});
На это:
button.addEventListener('click', (event) => {
console.log(i);
});
(ОПАСНО, менять на стрелочную функцию только при понимании того как она работает, при не уверенности не использовать данный совет)