GitHub Pagesで以下のサイトを制作しました。  
<https://imaimai17468.github.io/Products/CreditsCounterforKNCT/>

リポジトリはこちらになります。  
<https://github.com/imaimai17468/imaimai17468.github.io/tree/b6a86cc89b78319dc7963e27385dbf63148bb85b/Products/CreditsCounterforKNCT>

こちらのサイトの各科目のチェックを「入れる」「外す」のボタンが、初めて開いた場合でのみ機能せず、リロードすれば機能するのですが、これはなぜでしょうか？  
大変申し訳ないのですが、この詳しい発生タイミングは理解できておらず、このサイトを別のタブとして開いた場合大体発生する程度のことしかわかっておりません。

各学科の内容（ボタンや表など）はjavascriptを用いて展開しているため、その適用順によるものかなと思い試しましたが解決しませんでした。

iPhoneのsafariやChromeでも同様の現象を確認しました。  
Chromeのバージョンは99.0.4844.74（iPhoneのChromeも同様）  
iPhoneのOSはiOS 15.3.1  
です。

どなたか教えて頂けますと幸いです。よろしくお願いします。
CC BY-SA 4.0
2022-03-23T01:03:17.997
87975
2022-03-24T12:42:18.997
49383
question
javascript html
最初に開いた場合のみボタンが反応しない
コメントしてくださった皆様にはデバッグの関係で多くのご迷惑をおかけしました。申し訳ございません。

まず、履歴を消したのち本サイトを開くなどするとこの現象が確認できたため、その状態でデバッグ作業を行いました。未だに詳しい再現条件はわかっておりません。申し訳ございません。

その状態でM科の「必修科目のチェックを入れる」を押したとき、他科の必修科目のチェックボックスにチェックが入っていました。  
その原因を探った結果、教科一覧の表のチェックボックスに対するclassのつけ方に問題があることがわかりました。  
classの設定はoutput_csv.jsで行っているのですが、学科に関するclassは、配列departmentに各学科に対応したindexを入れることで得られるという仕組みでした。

```

    department[0] = 'm '
    department[1] = 'e '
    
```

といった感じです。  
そしてこのindexはdepartment_countという変数で管理しており、この扱い方が原因で当問題が発生しておりました。  
この変数はグローバル変数として宣言し0に初期化を行い、getCsvData関数およびconverArray関数を読み込む度に順次インクリメントを行いそれに対応した学科のclassを付けるというのが本来想定した動作でした。  
しかしグローバル変数として宣言したためか、この値にズレが発生してしまい、M科のclassを付けたい箇所にE科のclassがついてしまうなど、本来の学科に他学科のclassを付けてしまっていました。

その解決策として、getCsvData関数およびconverArray関数の引数に学科に対応したindexを持たせることとしました。これで当問題は発生しないものと思いたいですが、また同様の問題が発生したら大変申し訳なく思います。  
今回は多くのご助力をいただきまして誠にありがとうございました。
CC BY-SA 4.0
2022-03-24T12:42:18.997
88006
2022-03-24T12:42:18.997
49383
87975
answer