画像に合わせてコメントを表示したい

いまは画像は自動で置き換えますが、画像に合わせてコメントを表示もしたいです。以下は今までのコードです時計のところは別のものですが、きにしないでください。ご教授お願いします

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css.css" media="all"> <title>本日のお題：オブジェクトのあれこれ</title> <script type="text/javascript"> var hourB, minB, secB, timer; window.onload=ini; function ini(){ hourB=document.d_tokei.hour; minB=document.d_tokei.min; secB=document.d_tokei.sec; dTokei(); } function dTokei(){ var ima = new Date(); var hour = ima.getHours(); var min = ima.getMinutes(); var sec = ima.getSeconds(); if(hour<10) hour="0" + hour; if(min<10) min="0" + min; if(sec<10) sec="0"+sec; hourB.value=hour; minB.value=min; secB.value=sec; timer=setTimeout("dTokei()",1000); } function tomeru(){ clearTimeout(timer); } function cls(){ document.myImg.src ="image/0.gif";

}
num = 0;
function chagImg(){
document.myImg.src ="image/"+ num +".gif";
num++;
if(num ==4) num = 0;
timer=setTimeout("chagImg()",1000);
}

</script> </head> <body> <h2>本日のお題：オブジェクトのあれこれ</h2> <h3>画像をころころかえてみる<h3>

<img src="image/off.jpg" name="myImg" onclick="chagImg()"
onmouseout="this.src='image/off.jpg'">

<h3>デジタルタイマーを作ってみる<h3> <form name="d_tokei"> <input type="text" name="hour" class="tb">時 <input type="text" name="min" class="tb">分 <input type="text" name="sec" class="tb">秒<br>  <input type="button" value="START" onclick="chagImg()"> <input type="button" value="STOP" onclick="tomeru()"> <input type="button" value="CLEAR" onclick="cls()"> </form> </body> </html>

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

回答1件

ベストアンサー

こんな感じでどうでしょうか？

コメントを表示するための要素<p id="comment"></p>の中をjavascriptで操作します。
id="comment"がついているp要素は document.getElementById("comment")の方法で取得できます。

要素の中身は innerText で取得/変更できます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="css.css" media="all">
6    <title>本日のお題：オブジェクトのあれこれ</title>
7    <script type="text/javascript">
8        // ... ばっさり省略
9        num = 0;
10        function chagImg() {
11            document.myImg.src = "image/" + num + ".gif";
12            num++;
13
14            /* id="comment"のテキスト(innerText)を変更する */
15            // document.getElementById("comment").innerText = num + '番目のコメントです';
16
17            /* 他のやりかた
18             * もし、コメントの内容を任意で変更したかったら、コメントを配列に格納する方法もあります。
19             */
20            var comments = [
21                '1番目のコメントは「おはようございます」',
22                '2番目のコメントは「こんにちは」',
23                '3番目のコメントは「こんばんわ」',
24                '4番目のコメントは「おやすみなさい」'
25            ];
26
27            document.getElementById("comment").innerText = comments[num - 1];
28            timer = setTimeout("chagImg()", 1000);
29
30            if (num == 4) num = 0;
31        }
32
33    </script>
34</head>
35<body>
36<h2>本日のお題：オブジェクトのあれこれ</h2>
37<h3>画像をころころかえてみる</h3>
38
39<img src="image/off.jpg" name="myImg" onclick="chagImg()"
40     onmouseout="this.src='image/off.jpg'">
41<p id="comment">最初のコメント</p>
42<h3>デジタルタイマーを作ってみる</h3>
43<form name="d_tokei">
44    <input type="text" name="hour" class="tb">時
45    <input type="text" name="min" class="tb">分
46    <input type="text" name="sec" class="tb">秒<br>
47    <!--ボタンにnameをつけるとclearTimeoutメソッド動作不能-->
48    <input type="button" value="START" onclick="chagImg()">
49    <input type="button" value="STOP" onclick="tomeru()">
50    <input type="button" value="CLEAR" onclick="cls()">
51</form>
52</body>
53</html>