location.href でページが遷移しません。

実現したいこと

javascriptのlocation.hrefを用いてページを遷移させたいです。

前提

様々なサイトを参考にしつつ、カウントダウンしてページ遷移するものを作っている途中で問題が発生しました。
カウント0になりページが遷移しようとはしてくれるのですが、ひたすらリロードし続けています。

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

特にエラーメッセージは見受けられず、ずっとリロードがかかっている状態です。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>test</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10
11<body>
12    <main>
13        <h2>申し訳ございません。<br>ページ作成中につき、<span id="time">5</span>秒後にお問合せページへ遷移いたします。</h2>
14    </main>
15    <script src="main.js"></script>
16</body>
17
18</html>

javascript
1    let max = 5;
2        const time = document.getElementById("time");
3
4        window.addEventListener("DOMContentLoaded", () => {
5
6            function countDown() {
7                if (max > 0) {
8                    max--;
9                    time.textContent = max;
10                } else {
11                   
12                    time.textContent = 0;
13                    location.href = "test02.php";
14                    clearInterval(countDownTimer);
15                }
16            };
17            setInterval(countDown, 1000);
18        });
19

試したこと

test01.htmlなどのhtmlへ飛ぶようにするときちんと遷移します。
しかし偶然なのか、test02.phpなどのphpファイルへ遷移しようとすると上記の問題が起きます。
上記コードは仮で相対パスですが、実際には絶対パスでも行いましたが、だめでした。
location.assign("")というものでも試しましたが、ダメでした。

補足情報（FW/ツールのバージョンなど）

winterboum

2023/07/01 05:15

ひたすらリロードし続けているのはどうやって確認しましたか？リロードしているのはどのページ？

winterboum

2023/07/01 05:17

該当ページがない場合の動きをどっかで書いてますか test02.php を URL欄にかいてアクセスするとどうなりますか

otn

2023/07/01 05:18

> ひたすらリロードし続けています。具体的な現象は何でしょうか？客観的に書いてください。アドレスバーのURLが質問文掲載のページのURLのままでページが再描画され、また5からカウントダウンをやり直して、0になるとまたページが再描画され5からと言うこと？

soda346

2023/07/01 07:33

基本的なことですけど >clearInterval(countDownTimer); この countDownTimer って変数が定義されてないですけど var countDownTimer = setInterval(countDown, 1000); ってしないと駄目ですよね？

ak.n

2023/07/01 12:55

単純に test02.php をブラウザでURL指定して表示することはできるのでしょうか。それがグルグルするようであれば、そもそも php 自体がうまく動いていないのではないでしょうか。

scoutb6b

2023/07/02 02:38

>winterboumさんリロードしているのは遷移前のページです。リロードし続けているのは、タブのfaviconの箇所がグルグルし続けているからと認識しました。 URLをそのまま打ち込むと、ページへ行くことはできます。

winterboum

2023/07/02 02:40

「リロードしているのは遷移前のページ」ってどのfile？

scoutb6b

2023/07/02 02:41

>winterboumさんソースコードを掲載していますhtmlファイルです。

scoutb6b

2023/07/02 02:42

>otnさんいえ、カウントダウン5→0になったら0のままで、ページがずっとグルグルしています。

scoutb6b

2023/07/02 02:44

>soda346さん承知しました。定義して、試してみます。

scoutb6b

2023/07/02 02:45

>ak.nさん URLを指定すると表示してくれます。

winterboum

2023/07/02 02:46

載せてあるプログラムのfileの full path test01.html、test02.php の full path 「きちんと遷移」したときの location.href の書き方「際には絶対パスでも行いましたが、だめでした」のときの location.href の書き方を「質問欄を編集」して載せて

otn

2023/07/02 03:40

> var countDownTimer = setInterval(countDown, 1000); ってしないと駄目ですよね？ですね。 clearIntervalが失敗しているので、インターバルが残っていて、飛ばない。

scoutb6b

2023/07/02 14:08

>otnさん countDownTimerの変数を指定したところきちんとページが遷移しました。ありがとうございました。

scoutb6b

2023/07/02 14:08

皆様、解決に協力していただきありがとうございます。大変感謝いたします。

yambejp

2023/07/03 00:57

コメントで解決した場合は自己解決にして質問を閉じてください

行動規範の内容に同意します

回答1件

自己解決

clearInterval(countDownTimer)の指定し忘れのため、setInterval関数が完了しないことが原因のようでした。
以下に修正したところ動作の確認が取れました。

javascript
1window.addEventListener("DOMContentLoaded", () => {
2
3            function countDown() {
4                if (max > 0) {
5                    max--;
6                    time.textContent = max;
7                } else {
8                   
9                    time.textContent = 0;
10                    location.href = "test02.php";
11                    clearInterval(countDownTimer);
12                }
13            };
14            let countDownTimer = setInterval(countDown, 1000);
15        });