【JS】イベントリスナー、ループ、クロージャを組み合わせてボタンを制御する

        <form action="save.php" method="GET" class="myForm">
            <h2>作者が一人の場合</h2>
            <input type="text" name="auther01" class="auther01" placeholder="作者名01" oninput="updateComplete1()">
            <input type="hidden" name="auther02" class="auther02" placeholder="作者名02">
            <input type="hidden" name="auther03" class="auther03" placeholder="作者名03">
            <input type="text" name="date" class="date" placeholder="発行日" oninput="updateComplete1()">
            <input type="text" name="name" class="name" placeholder="本の名前" oninput="updateComplete1()">
            <input type="text" name="publisher" class="publisher" placeholder="出版社" oninput="updateComplete1()">
            <br>
            <input type="text" name="complete" class="complete">
            <input type="submit" value="保存" class="submit" disabled>
        </form>

        <form action="save.php" method="GET" class="myForm">
            <h2>作者が複数の場合</h2>
            <input type="text" name="auther01" class="auther01" placeholder="作者名01" oninput="updateComplete2()">
            <input type="text" name="auther02" class="auther02" placeholder="作者名02" oninput="updateComplete2()">
            <input type="text" name="auther03" class="auther03" placeholder="作者名03" oninput="updateComplete2()">
            <input type="text" name="date" class="date" placeholder="発行日" oninput="updateComplete2()">
            <input type="text" name="name" class="name" placeholder="本の名前" oninput="updateComplete2()">
            <input type="text" name="publisher" class="publisher" placeholder="出版社" oninput="updateComplete2()">
            <br>
            <input type="text" name="complete" class="complete">
            <input type="submit" value="保存" class="submit" disabled>
        </form>

var forms = document.getElementsByClassName("myForm"); //myForm クラスを持つすべてのフォームに対してイベントリスナーを追加
for (var i = 0; i < forms.length; i++) { // "myForm" クラスを持つすべてのフォームに対してループ処理を行う
    var nameInput = forms[i].getElementsByClassName("name")[
        0]; //iの中にはforms.length; i++の処理によって、myFormというクラスをもつ要素（フォーム）がコレクションとして格納される
    //ここでの0はforms[i]に格納されたmyFormというクラスをもつ要素の中身にある最初の要素を意味する。なので[1]を使用せずとも一回の処理で各コレクションにアクセス可能。
    var saveButton = forms[i].getElementsByClassName("submit")[0];
    // コレクション＝getElementsByClassName("name") のようにクラス名が "name" である要素の集合を取得し、コレクションとして扱われる。今回の場合はformsがコレクション（集合体）

以下省略～

    nameInput.addEventListener("input", createInputListener(nameInput, saveButton)); // nameInput の値が変化したときに、createInputListener 関数が実行される
}

以下省略～

function createInputListener(input, button) {
    //return function() { ... } の部分は、イベントリスナーとして使用するための関数
    return function() { //ここではreturn文を無名関数に使って結果を呼び出し元に返すことで、イベントリスナーの処理として再利用できている（タイミング的には呼び出しもとで処理が行われる前になる）
        //内部の関数を返すことで、外部のスコープにあるnameInputとsaveButtonの値を保持しつつ、イベントが発生した際に正しくボタンの状態を制御
        button.disabled = !input.value;
        // input の値が空であれば、ボタンを無効化（disabled = true）
        // input の値が入力されていれば、ボタンを有効化（disabled = false）
    };
}