写真表示のあと少し遅れて紹介文を表示するJavaScript

写真と文章（テキスト）を表示する方法は色々あると思いますが、ここでは、「if文」を使って、写真は「.setAttribute」、テキストは「.textContent」で入れ替える方法を取っています。　また、「setTimeout」をつかって、遅れて文章を表示させています。

＊＊＊＊＊＊＊＊＊＊ プログラムはここから

下のボタンを押すと北から南にある国立公園の写真が合計8枚表示されますので、それがどこの国立公園の写真なのかを考えてください。4秒後に答えと説明文が表示されます。

国立公園の写真を見る 4秒後に回答表示

　公園名を表示

　説明1を表示

　説明2を表示

＊＊＊＊＊＊＊＊＊＊プログラムはここまで

もう一度初めから表示させるには、再読み込み（F5キー）してください。

PR

コードの考え方や注意点など

主要なコード部分は以下のとおりです。　　全体のコードは、画面を右クリックして、ページのソースを表示して、このHPのHTMLから見てください。（//で注釈を入れています）

<p><img id="myMphoto" src="img/ko_main.jpg">
<button id="myBtn" onclick="myShow()">国立公園の写真を見る 4秒後に回答表示</button></p>
<p id="myName1">　公園名を表示</p>　　　　//ここへ文章を表示させます
<br>
<p id="myName2">　説明1を表示</p>
<p id="myName3">　説明2を表示</p>

<script>　
let myTimes = 0;
function myShow() {　　　　　//ボタンが押されたときの処理
myTimes++;
if (myTimes == 1) {　　　　　　//最初の写真
　　document.getElementById('myMphoto').setAttribute('src' , 'img/ko_daisetusan.jpg');　//写真表示
　　setTimeout(myShow , 4000);　　　//4秒待機
　　　　function myShow() { 　　　　//以下を一斉に表示
　　　　　document.getElementById('myName1').textContent = '大雪山・・・';
　　　　　document.getElementById('myName2').textContent = '旭岳（2291ｍ）・・・';
　　　　　document.getElementById('myName3').textContent = 'アイヌの人・・・';
　　　　}

} else if (myTimes == 2) {　　　//2番目の写真
　　　・・・以下2～7を繰り返し　以下省略
　　　・・・ 最後にボタンを小さくする処理
　　document.getElementById('myBtn').textContent = ''; //ボタンを小さくした }
}
}
}

私が勝手に決めた「変数」などは、先頭に「my」をつけていますので、適宜変更していただくといいのですが、それ以外の、JavaScriptのメソッドやオブジェクトは大文字・小文字に注意して間違いのないようにしてください。

ここでも、DOM（Documentt Object Model）のメソッドの「.getElementById」「.setAttribute」やプロパティーの「.textContent」を使っています。

これらは、画面に画像やテキストを表示させるための基本的な方法ですので、この使い方や書き方をマネて覚えておくと便利に使えるでしょう。

JavaScriptの難しい定義や理屈は、私自身も難しくて、まだまだ理解できませんが、私の覚え方は、「うしろにイコール（＝）のあるものはプロパティーで、『’　’か”　”』で囲む…」　と覚えています。

ここでは、環境省のHPを参考にして引用させていただきましたが、改良の余地があります。　例えば、一定時間表示すると答えをいったん消すの良さそうですね。

PR

---