クリックすると写真表示後に少し遅れて紹介文が表示する
写真と文章(テキスト)を表示する方法は色々考えられるようですが、ここでは、
①「if文」を使って、選ばれた写真を表示する準備をして
②一定時間が経過したら選択した写真を提示して
③同時にその写真の説明文を表示する
というJavascriptのプログラムを作っています。
「.setAttribute」と「.textContent」「setTimeout」 を使っています
写真の入れ替え表示は「.setAttribute」で、テキストの入れ替えは「.textContent」を使って、HTML内の「id」で指定した部分に入れ替えて表示させています。
また、少し考えていただく時間を設けるために、「setTimeout」をつかって、写真を表示してから、少し遅れて文章を表示させるようにしています。
そして、全問が終了すると、ボタンを消して「次に進めないようにしています。
********** ボタンをクリックすると動作します。
下に、北から南にある国立公園の写真8枚を用意しています。 横のボタンを押すと1枚目の写真が表示されますので、その写真が、どこの国立公園の写真なのかを考えてください。 4秒後に答えと説明文(2つの文章)が表示されます。
もう一度、同じボタンをクリックすると次の問題に移動します。8問が終了すると、ボタンが消えて問題が終了します。
公園名を表示
説明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 = '旭岳(2291m)・・・';
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のきれいな風景写真を使わせていただいたのですが、画像を変えるだけでも面白いものになるでしょう。
また、例えば、2問目以降に移る際に、前の答えを消したり、また、タイマー関数の「setInterval」や「setTimeout」などを応用して、一定時間表示すると答えをいったん消したり、問題が終了すると、ボタンだけでなく、回答などを消すことなどもできそうですね。
適当な頭の運動とおもっていると楽しめますね。
PR