javascriptのカウントダウンを1ページに複数表示させる

前提・実現したいこと

javascriptでカウントダウンを1ページ内に2つ表示させたいです。

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

カウントダウンが1つしか表示されません。

該当のソースコード


<html lang="ja">
<head>
<script type="text/javascript">
	
// 期限の設定
var gYear = 2019, // 年
    gMonth = 2, // 月
    gDay = 28, // 日
    gHour = 23, // 時
    gMinute = 59, // 分
    gSecond = 59; // 秒
 
var goal = new Date(gYear, gMonth-1, gDay, gHour, gMinute, gSecond);
 
// 使用する変数の宣言
var currentTime, period,
    cDay, cHour, cMinute, cSecond,
    insert = "";
 
// カウントダウンの処理1
window.onload = function countdown() {
 
    // 現在から期限日までの差を取得
    currentTime = new Date();
    period = goal.getTime() - currentTime.getTime();
 
    // 期限を過ぎていない時
    if(period >= 0) {
        // 日数を取得
        cDay = Math.floor(period / (1000 * 60 * 60 * 24));
        period -= (cDay * (1000 * 60 * 60 * 24));
 
        // 時間を取得
        cHour = Math.floor(period / (1000 * 60 * 60));
        period -= (cHour * (1000 * 60 * 60));
 
        // 分を取得
        cMinute = Math.floor(period / (1000 * 60));
        period -= (cMinute * (1000 * 60));
 
        // 秒を取得
        cSecond = Math.floor(period / (1000));
        period -= (cSecond * (1000));
 
        // フレーム
        cFlame = Math.floor(period / (10));
 
        // 残り日数の書き換え
        insert = "終了まであと";
        insert += '<span class="d">' + cDay + '</span>' + "日";
        insert += '<span class="h">' + cHour + '</span>' + "時間";
        insert += '<span class="m">' + cMinute + '</span>' + "分";
        insert += '<span class="s">' + cSecond + '</span>' + "秒";
        document.getElementById('countdown-unit1').innerHTML = insert;
 
        // カウントダウンの処理を再実行
        setTimeout(countdown, 10);
 
    // 期限を過ぎた時
    } else {
        document.getElementById('countdown-unit1').innerHTML = 'Time Up';
    }
}
 
// 処理の実行
countdown();
</script>
</head>

<body>
<center><font size="4" color="#ff1493"><b><div id="countdown-unit1"></div></b></font></center>
</body>
</html>

試したこと


// カウントダウンの処理2
window.onload = function countdown2() {
 
    // 現在から期限日までの差を取得
    currentTime = new Date();
    period = goal.getTime() - currentTime.getTime();
 
    // 期限を過ぎていない時
    if(period >= 0) {
        // 日数を取得
        cDay = Math.floor(period / (1000 * 60 * 60 * 24));
        period -= (cDay * (1000 * 60 * 60 * 24));
 
        // 時間を取得
        cHour = Math.floor(period / (1000 * 60 * 60));
        period -= (cHour * (1000 * 60 * 60));
 
        // 分を取得
        cMinute = Math.floor(period / (1000 * 60));
        period -= (cMinute * (1000 * 60));
 
        // 秒を取得
        cSecond = Math.floor(period / (1000));
        period -= (cSecond * (1000));
 
        // フレーム
        cFlame = Math.floor(period / (10));
 
        // 残り日数の書き換え
        insert = "終了まであと";
        insert += '<span class="d">' + cDay + '</span>' + "日";
        insert += '<span class="h">' + cHour + '</span>' + "時間";
        insert += '<span class="m">' + cMinute + '</span>' + "分";
        insert += '<span class="s">' + cSecond + '</span>' + "秒";
        document.getElementById('countdown-unit2').innerHTML = insert;
 
        // カウントダウンの処理を再実行
        setTimeout(countdown, 10);
 
    // 期限を過ぎた時
    } else {
        document.getElementById('countdown-unit2').innerHTML = 'Time Up';
    }
}
 
// 処理の実行
countdown();

以上をhead内に追加し
body内には以下を追加したのですが、この2つ目が表示されません。


<center><font size="4" color="#ff1493"><b><div id="countdown-unit2"></div></b></font></center>

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

初心者で、よく分からなくなっています。お教えください。よろしくお願いいたします。

kei344

2019/02/02 15:28

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

YutakaFmagi

2019/02/02 15:39

ご指摘ありがとうございます。囲んでみました。よろしくお願いします。

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

回答1件

ベストアンサー

別の時間のカウントダウンで無いなら。
別の時間なら変数goal を個別に持つ必要があります。
あと、window.onloadには1つの関数しか入りません。addEventListenerを使うようにしてください。

js
1// 期限の設定
2var gYear = 2019, // 年
3    gMonth = 2, // 月
4    gDay = 28, // 日
5    gHour = 23, // 時
6    gMinute = 59, // 分
7    gSecond = 59; // 秒
8
9var goal = new Date(gYear, gMonth-1, gDay, gHour, gMinute, gSecond);
10
11// 使用する変数の宣言
12var currentTime, period,
13    cDay, cHour, cMinute, cSecond,
14    insert = "";
15
16// カウントダウンの処理1
17window.onload = function countdown() {
18
19    // 現在から期限日までの差を取得
20    currentTime = new Date();
21    period = goal.getTime() - currentTime.getTime();
22
23    // 期限を過ぎていない時
24    if(period >= 0) {
25        // 日数を取得
26        cDay = Math.floor(period / (1000 * 60 * 60 * 24));
27        period -= (cDay * (1000 * 60 * 60 * 24));
28
29        // 時間を取得
30        cHour = Math.floor(period / (1000 * 60 * 60));
31        period -= (cHour * (1000 * 60 * 60));
32
33        // 分を取得
34        cMinute = Math.floor(period / (1000 * 60));
35        period -= (cMinute * (1000 * 60));
36
37        // 秒を取得
38        cSecond = Math.floor(period / (1000));
39        period -= (cSecond * (1000));
40
41        // フレーム
42        cFlame = Math.floor(period / (10));
43
44        // 残り日数の書き換え
45        insert = "終了まであと";
46        insert += '<span class="d">' + cDay + '</span>' + "日";
47        insert += '<span class="h">' + cHour + '</span>' + "時間";
48        insert += '<span class="m">' + cMinute + '</span>' + "分";
49        insert += '<span class="s">' + cSecond + '</span>' + "秒";
50        document.getElementById('countdown-unit1').innerHTML = insert;
51        document.getElementById('countdown-unit2').innerHTML = insert;
52
53        // カウントダウンの処理を再実行
54        setTimeout(countdown, 10);
55
56    // 期限を過ぎた時
57    } else {
58        document.getElementById('countdown-unit1').innerHTML = 'Time Up';
59        document.getElementById('countdown-unit2').innerHTML = 'Time Up';
60    }
61}
62
63// 処理の実行
64countdown();
65```**動くサンプル：**[https://jsfiddle.net/53gq7Lvt/](https://jsfiddle.net/53gq7Lvt/)
66
67---
68
69下記要素は廃止されています。参考にされる書籍/サイト等を新しい物に変えるなどしてください。
70
71【<center>: 文字列の中央揃え要素 (廃止) - HTML: HyperText Markup Language | MDN】
72[https://developer.mozilla.org/ja/docs/Web/HTML/Element/center](https://developer.mozilla.org/ja/docs/Web/HTML/Element/center)
73
74【<font> - HTML: HyperText Markup Language | MDN】
75[https://developer.mozilla.org/ja/docs/Web/HTML/Element/font](https://developer.mozilla.org/ja/docs/Web/HTML/Element/font)