jsのカウントダウンタイマーを1ページに複数設置したいです

###前提・実現したいこと
javascriptで24時間でループするカウントダウンを1ページに複数個設置したいです。
まだ初心者なもので分からないことだらけですがご協力をお願いしたいです。

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

複数個設置してみるとどれか１つのカウントダウンしか動かず、他のものは表示もされません。

###該当のソースコード

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <script type="text/javascript"> <!-- function doCountDown() { setInterval('countDown()', 500); }

function countDown() {
var now = new Date();
var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1;
var hour = Math.floor(diff / 3600);
diff %= 3600;
var min = Math.floor(diff / 60);
var sec = diff % 60;
document.getElementById('cd').innerHTML= "明日まで、あと" + hour + "時間" + min + "分" + sec + "秒";
}

//-->
</script>

</head> <body onload="javacript:doCountDown();"> <div id='cd'></div> </body> </html>

###試したこと
function countDown2() {
var now = new Date();
var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1;
var hour = Math.floor(diff / 3600);
diff %= 3600;
var min = Math.floor(diff / 60);
var sec = diff % 60;
document.getElementById('cd2').innerHTML= "明日まで、あと" + hour + "時間" + min + "分" + sec + "秒";
}

を加えて、
2つ目に設置したい場所に

と入れてみました。

###補足情報(言語/FW/ツール等のバージョンなど)

至らない点が多いと思いますが、どうかお願い致します。

kei344

2017/12/22 02:43

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

MamS

2018/01/15 10:42

すみません！！以後そのようにします！ご指摘ありがとうございました！

kei344

2018/01/15 11:14

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

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

回答1件

ベストアンサー

例示のソースは相当古い書き方で推奨はしませんが、
そのまま流用するとこんな感じです

Javascript
1<html>
2<head>
3<script>
4function doCountDown() {
5setInterval('countDown()', 500);
6setInterval('countDown2()', 500);
7}
8function countDown() {
9var now = new Date();
10var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
11var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1;
12var hour = Math.floor(diff / 3600);
13diff %= 3600;
14var min = Math.floor(diff / 60);
15var sec = diff % 60;
16document.getElementById('cd').innerHTML= "明日まで、あと" + hour + "時間" + min + "分" + sec + "秒";
17}
18function countDown2() {
19var now = new Date();
20var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
21var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1;
22var hour = Math.floor(diff / 3600);
23diff %= 3600;
24var min = Math.floor(diff / 60);
25var sec = diff % 60;
26document.getElementById('cd2').innerHTML= "明日まで、あと" + hour + "時間" + min + "分" + sec + "秒";
27}
28</script>
29</head>
30<body onload="javacript:doCountDown();">
31<div id='cd'></div>
32<div id='cd2'></div>
33</body> 
34</html>