substrを使って同一の選択をした際にアラートを出したい

Question

前提・実現したいこと

科目登録のシステムを作成しているのですが、同一の科目を選択している場合、アラートを出したいと考えているのですが、substrを使った判定がうまくいきませんでした。
(例: 0130 2年現代文Ba・月3水1と0131 2年現代文Bb・月4水2を選択している際に、同じ2年現代文を選択しているため、アラートを出したい。)

発生している問題・エラーメッセージ

同一科目を選択した際に、科目番号をsubstrを使用して抜き出したいが、そもそもそのためのfor文が動かない。

該当のソースコード

function submit() {
            var number = 1;
            var check = 1;
            var input = document.getElementById("sub").value;
            var output = document.getElementById(number).innerHTML;
            for (number = 1; output != ""; number++) {
                output = document.getElementById(number + 1).innerHTML;
                
            }
            for (check = 1; check <= 13; check++) {
                console.log(check);
                if (output.substr(0, 3) == input.substr(0, 3)) {
                    alert(同じ科目は登録しないでください);
                    exit;

                }
            }
            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="01312年現代文Bb・月4水2">0131 2年現代文Bb・月4水2</option>
        <option value="01322年現代文Bc・月4金1">0132 2年現代文Bc・月4金1</option>
        <option value="01332年現代文Bd・火2木2">0133 2年現代文Bd・火2木2</option>
        <option value="01342年現代文Be・火4木2">0134 2年現代文Be・火4木2</option>
        <option value="01352年現代文Bf・水1木4">0135 2年現代文Bf・水1木4</option>
        <option value="01362年現代文Bg・水2金1">0136 2年現代文Bg・水2金1</option>
<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>

補足情報

substrの式自体はうまく動きました。
また、上のselectの中にある選択肢は一部を抜粋したもので、実際はさらに選択肢があります。なので、最大13の選択肢の中から選ぶようにしたいと考えています。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const sub=document.querySelector('#sub');
  document.querySelector('#btn').addEventListener('click',()=>{
    if(sub.value=="notselect"){
      alert('not selected!'); 
    }else if([...document.querySelectorAll('#sublist tbody td')].map(x=>x.textContent).includes(sub.value)){
      alert('already exists'); 
    }else{
      document.querySelector('#sublist tbody').appendChild(
        [Object.assign(document.createElement('td'),{textContent:sub.value})].reduce((x,y)=>{
          x.appendChild(y);
          return x;
        },document.createElement('tr'))
        );
    }
  });
});
</script>

<select id="sub">
<option value="notselect"></option>
<option value="01302年現代文Ba・月3水1">0130 2年現代文Ba・月3水1</option>
<option value="01312年現代文Bb・月4水2">0131 2年現代文Bb・月4水2</option>
<option value="01322年現代文Bc・月4金1">0132 2年現代文Bc・月4金1</option>
<option value="01332年現代文Bd・火2木2">0133 2年現代文Bd・火2木2</option>
<option value="01342年現代文Be・火4木2">0134 2年現代文Be・火4木2</option>
<option value="01352年現代文Bf・水1木4">0135 2年現代文Bf・水1木4</option>
<option value="01362年現代文Bg・水2金1">0136 2年現代文Bg・水2金1</option>
</select>
<button id="btn">追加</button>
<table border="1" id="sublist">
<thead>
<tr>
<th>科目リスト</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

上限あり

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const max=3;
  const sub=document.querySelector('#sub');
  document.querySelector('#btn').addEventListener('click',()=>{
    if(sub.value=="notselect"){
      alert('not selected!'); 
    }else if([...document.querySelectorAll('#sublist tbody td')].map(x=>x.textContent).includes(sub.value)){
      alert('already exists'); 
    }else if([...document.querySelectorAll('#sublist tbody td')].length>=max){
      alert(`can't regist anymore`); 
    }else{
      document.querySelector('#sublist tbody').appendChild(
        [Object.assign(document.createElement('td'),{textContent:sub.value})].reduce((x,y)=>{
          x.appendChild(y);
          return x;
        },document.createElement('tr'))
        );
    }
  });
});
</script>

<select id="sub">
<option value="notselect"></option>
<option value="01302年現代文Ba・月3水1">0130 2年現代文Ba・月3水1</option>
<option value="01312年現代文Bb・月4水2">0131 2年現代文Bb・月4水2</option>
<option value="01322年現代文Bc・月4金1">0132 2年現代文Bc・月4金1</option>
<option value="01332年現代文Bd・火2木2">0133 2年現代文Bd・火2木2</option>
<option value="01342年現代文Be・火4木2">0134 2年現代文Be・火4木2</option>
<option value="01352年現代文Bf・水1木4">0135 2年現代文Bf・水1木4</option>
<option value="01362年現代文Bg・水2金1">0136 2年現代文Bg・水2金1</option>
</select>
<button id="btn">追加</button>
<table border="1" id="sublist">
<thead>
<tr>
<th>科目リスト</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Comments

[退会済みユーザー]

返信が遅くなってしまい申し訳ありません。
質問の一部を修正したので、ご覧いただいた後に、改めて回答いただけると幸いです。

[退会済みユーザー]

また、elseifやelseで使われているxやyはどんな変数なのでしょうか。

[yambejp]

なにか追加仕様必要なのでしょうか？

[退会済みユーザー]

補足にも書かせていただいたのですが、上のselectの中身は全体の一部を、冗長だと考えて一部抜粋したもので、本来のselectの中身は100以上あります。また、科目は最大で13個登録できるので、13個以降は、選択しても画面に表示されないように、あらかじめ題名を含めた14個のthを作っており、innerHTMLを使って追加や書き換えをしたいと考えています。

[yambejp]

上限設定バージョン追記しておきました
このUIだと削除機能もあった方がいいのと、すでに選んだものを
わかるようにしたほうがよいかもしれません

Answer 2

for (check = 1; check == 13; check++) {

これではループしません
for の２つ目の論理式（check == 13）が真でないと、forの中身は実行しませんね

＃で、これが真になりようがないので、ループしない

Comments

[退会済みユーザー]

forを(check = 1; check <= 13; check++) {に修正し、selectでも最初の3桁が同一のものを選択するようにしました。しかし、checkが13まで上がる間にアラートが出ずにループが終了してしまいました。

[y_waiwai]

提示のコードでは閉じるカッコがないなど不完全なものなので、なんとも言いようがないです。
まあ、そうなるんでしょうね、としか。

[退会済みユーザー]

完全でないところ、うまくいかない原因を教えていただけないでしょうか。

[y_waiwai]

そのforのところで、outputには何が入ってるのか調べてみては。

[退会済みユーザー]

もっとストレートに答えていただけませんか。

[y_waiwai]

すでに、この質問からは外れてますよ。
どうにかしたいなら、ちょっとは努力しましょう

[退会済みユーザー]

自分で解決できるなら、最初からコメントに書いたりしません