javascript-events - イベントのある for ループ

Question

私はオンラインチュートリアルと一緒に作業しており、以下のコードを理解しようとしています. 私が得られないのは、これが2回以上機能する理由です。ループが 2 回実行されi == len、条件i < lenが真でなくなった場合。では、異なるクラスを 2 回以上切り替えることができるのはなぜでしょうか?

私の推測では、条件が false のときに再びi設定されますが0、正しく理解できましたか? 誰かが私を助けてくれることを願っています.この特定の問題の説明がオンラインのどこにも見つかりませんでした.

HTML

 <button>Normal</button>
 <button>Changed</button>

CSS

.normal {background-color: white;color:black;}
.changed {background-color: black;color:white;}

JavaScript

(function() {
var buttons = document.getElementsByTagName("button");

for (var i = 0, len = buttons.length; i < len; i +=1)
  buttons[i].onclick = function() {
    var className = this.innerHTML.toLowerCase();
    document.body.className = className;
 }}
}());