ループが1回余計に回ってしまう原因が知りたい

Question

前提・実現したいこと

科目を登録するシステムを作成しており、表に選択した科目を表示するようにしたいのですが、ループが1回余計に回ってしまい、動作自体はループの後に修正をかけてできるのですが、可能な限りコードの行数を減らしたいと思い、原因を知りたいと考えています。

該当のソースコード

function submit() {
            var number = 1;
            var input = document.getElementById("sub").value;> //select要素で選択された科目
            var output = document.getElementById(number).innerHTML;//表に代入する
            for (number = 1; output != ""; number ++) {
                output = document.getElementById(number).innerHTML;

            }
           document.getElementById(number).innerHTML = input;

<select id="sub">
        <option value="notselect"></option>
        <option value="01302年現代文Ba・月3水1">0130 2年現代文Ba・月3水1</option>
        <option value="0810コミュニケーション英語2a・月3火2水1木2">0810コミュニケーション英語2a・月3火2水1木2</option>
        <option value="0811コミュニケーション英語2b・月4火3水2木1">0811コミュニケーション英語2b・月4火3水2木1</option>
        <option value="0100国語基礎a・月56">0100国語基礎a・月56</option>
    </select>
    <button onclick="submit()">追加</button>
    <table border="1" id="sublist">
        <tr>
            <th>科目リスト</th>
        </tr>
        <tr>
            <td>
                <div id=1></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id=2></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id=3></div>
            </td>
        </tr>
    </table>

Answer 1

解決案

submit() 関数を下記のように書き換えます。
具体的な変更箇所はforループ内のnumberに1を足した値を用いています。

function submit() {
  var number = 1
  var input = document.getElementById('sub').value //select要素で選択された科目
  var output = document.getElementById(number).innerHTML //表に代入する
  for (number = 1; output != ''; number++) {
    output = document.getElementById(number + 1).innerHTML
  }
  document.getElementById(number).innerHTML = input
}

解説

表に選択した科目を表示するようにしたいのですが、ループが1回余計に回ってしまい、

こちらの意味は、１つ科目を設定した状態で、３回ループが回ってしまうという意味で間違いないでしょうか。その体でご説明しますね。
for (number = 1; output != ''; number++)のoutput != ''の判定部分に渡したいのは、前回の判定時にnumber = 1であればid = 2の内容を、number = 2であればid = 3の内容だと思います。
ですが、現状のコードだと１回目のループ後に渡されるのはoutput = document.getElementById(1).innerHTMLの内容になってしまっています。２回目のループだとoutput = document.getElementById(2).innerHTMLの内容ですね。
そうではなく、ちゃんと次のnumberのidから取得した内容をoutputに渡してあげるため、number + 1したといった具合です。

何か不明な点があればお伝え下さい。
ご確認をよろしくおねがいします。