0

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
です。

どなたか教えて頂けますと幸いです。よろしくお願いします。

6
  • 2
    適用順についてはどう試したかを追記していただけると、適切な回答が集まりやすいかと思います。また、主旨とは外れますがPagesのサイトのコピーライトがフルネームで記載されており、高専の名称も分かることから個人を特定することが容易となってしまうため公開には注意した方が良いかもしれません。
    – polarmap
    Commented 2022年3月23日 1:49
  • 私のPC(Macbook)におけるChromeではチェックボックスを初めて開いた場合でも機能いたしました。試したChromeのバージョンとしては99.0.4844.74に加え99.0.4844.83(Official Build) (x86_64)も問題は確認されませんでした。
    – polarmap
    Commented 2022年3月23日 2:08
  • 3
    ソースコード量も多くまだまだ原因が絞れていないのでまずは原因を質問するよりもご自身でデバッグする方法を学んだほうがよろしいかと思います。JS+HTMLであればchromeのデバッグツールで十分に動作確認できると思います。参考
    – keitaro_so
    Commented 2022年3月23日 2:16
  • ちなみに私の環境だと再現できました。
    – keitaro_so
    Commented 2022年3月23日 2:17
  • 1
    これぐらいの規模のコードを無償でデバッグ丸投げするのは無理があります。ちょっと触った程度だと rerquired_checked(..., 0) なのに 0 に相当するテーブルが非表示になっていて変化が見えないことだけわかりました。なぜ非表示なのか原因を調べて、その原因の対処方法の質問になるといいなと思います。
    – int32_t
    Commented 2022年3月24日 3:14

1 件の回答 1

0

コメントしてくださった皆様にはデバッグの関係で多くのご迷惑をおかけしました。申し訳ございません。

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

その状態で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を持たせることとしました。これで当問題は発生しないものと思いたいですが、また同様の問題が発生したら大変申し訳なく思います。
今回は多くのご助力をいただきまして誠にありがとうございました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。