[Dilettante_Pro]

Alessio18911,
Попробую объяснить.
Ваш пример

for (var i = 0; i < label.length; i++)
      {
        label[i].addEventListener('click', function() {
          page.className = "page bg" + (i+1);
          });
       }

Здесь цикл по i - это создание обработчиков события click для всех элементов массива label.
строка

page.className = "page bg" + (i+1);

при этом не исполняется - просто запоминается в конкретном обработчике (причем запоминается идентификатор i, а не его значение).
По завершении цикла создания обработчиков i принимает финальное значение - и больше не меняется.
При исполнении по событию click обработчика для любого элемента из списка label выполнится вышеуказанная строка, в которой будет использоваться это значение

Иллюстрация:
Вариант с использованием значения i при создании обработчика

<div style="border:1px solid black">1</div>
<div style="border:1px solid black">2</div>
<div style="border:1px solid black">3</div>
<div style="border:1px solid black">4</div>
<script>
var divs = document.querySelectorAll('div');
 for(var i = 0; i < divs.length; i++) {
   divs[i].onclick = function(x) 
      {
          return function() 
          { 
                alert(x)
          }
       }(i);
}
</script>

Вариант с использованием идентификатора i при создании обработчика

<div style="border:1px solid black">1</div>
<div style="border:1px solid black">2</div>
<div style="border:1px solid black">3</div>
<div style="border:1px solid black">4</div>
<script>
var divs = document.querySelectorAll('div');
 for(var i = 0; i < divs.length; i++) {
   divs[i].onclick = function() 
      {
               alert(i)
       };
}
</script>