【原因不明】コードが正常に実行されない

ロシアンソリティアを制作中です。

なぜか正常に動作しません。
Playgroundではスタート画面は出ますが、スタートボタンを押すとエラーコードが出てカードが並べられません。また、一時停止のボタンを押しても同じエラーが出ます。(ReferenceError)

Google Chromeの検証ではスタート画面が出てスタートを押して1回目のカードの移動までは動きますが、2回目にカードを動かすことができません。Google Chromeではエラーコードは出ません。

試行回数の度にカーソルと対象の位置がずれていくバグも直りません。

①立ち上げたらスタート画面が出る
②スタートボタンを押したら時間測定されて、カードが並べられる
③ルール通りにカードを移動できる
④ストップを押したら時間が止まって一時停止の画面が出る
⑤設定やルールを押すとそれぞれの画面が出る
⑤クリアしたらゲームクリアの画面が出る

2024/06/03 00:10

全体像が見えないです最低限現状が確認できるデータの提示をお願いします

2024/06/03 00:10

追加した後の最小限のHTMLがほしい感じがしますが、その情報なしで再現できますでしょうか？（もしくは playground を用意できますでしょうか？

2024/06/03 02:24

コメントありがとうございます。データが不足してしまい大変申し訳ございません。全体のコードをplaygroundに追加しました。ご確認よろしくお願いいたします。

2024/06/07 07:25

2024/06/07 07:32

playground、style にアクセスできなくてエラーになっていませんでしょうか？（consoleタブ参照

2024/06/07 07:47

styleにアクセスできないというエラーコードはmain.jsの1行目に出ています。ですが'set'というidはindex.htmlの73行目に記述されています。どうすれば解決できるか分かりません。

2024/06/07 08:43 編集

main.js が body 構築前に呼ばれているからでは………？（イベント登録で実行タイミングを遅れさせるか、対象のscriptタグをbody末尾に移動するかすればいいと思いますが。 https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event

2024/06/07 10:36

ご回答ありがとうございます。 bodyタグの末尾に１つのjsにまとめて移動させたらエラーが出なくなりました。なお、マウスとカーソルの位置が合わない点や2回目以降のドラッグ&ドロップができない点は未解決ですが、一旦ベストアンサーに選ばさせてください！！未解決の点はまた新しく質問したいと思います。

2024/06/07 11:16

むしろ、何をしたかを自分で書いてそれをベストアンサーに選んで自己解決でいいと思われますよ……。

2024/06/07 12:00

ありがとうございました！その後、カーソルのズレやカードが動かなくなる点もドロップ後にpos.xとpos.y(位置)に0を代入することで解決し、おかげさまで完成しました！！