初心者javascript グーグルクロムのウィンドウを最大化から急に縮小するとテキストがはみ出す。

javascriptでhtmlのcontentのテキストが要素からはみ出したときに、フォントサイズを縮小・拡大して調節するプログラムを作ったのですが、google chromeのブラウザでしか試してないのですが、ウィンドウを最大化ボタンで大きくし、縮小ボタンを押してウィンドウの横幅を最小にして表示すると、プログラムが機能せず、テキストはみ出してしまいます。リロードすると、収まります。どうすれば、解決するのか分かりません。アドバイスください。
なお、ウィンドウの右をクリックで掴み、縮める時は機能します。

リンク：
https://codepen.io/DEN-KEN/pen/VwRyQEP

No.1 ベストアンサー 回答者： rera1016 回答日時： 2024/01/29 22:38

サイズ変更を行うadjust()の関数が、"DOMContentLoaded"イベントが発生したときにしか動かないので、質問のような動きになります。

adjust()の関数を上記イベント内に書くのではなく、独立した関数として先に宣言しておき、"DOMContentLoaded"、"resize"のイベントリスナーの中で呼び出すようにしましょう。

function adjust() {
...
}

window.addEventListener('DOMContentLoaded', () => {
adjust()
})

window.addEventListener('resize', () => {
adjust()
})

この回答へのお礼

回答ありがとうございます。原因は分かりました。嬉しいです。単純にDOMContentLoadedの記述を取ればいいのか、それとも改良の方法があるのか、分かればなお嬉しいです。

お礼日時：2024/01/30 19:07