初投稿ですcherryと申します。これから自分が発見したこと、学習したことを
備忘録として書かせていただきます。まず手始めに、javascriptで画像を表示・非表示するプログラムを紹介していきたいと思います。
#ソースコードの説明
<img id="gazou"src="denkyuu.png"
<form>
<div>
<input type="button" name="onOff1"value="ON/OFF"onclick="onOff()">
</div>
</form>
まず、簡単なhtmlコードの説明をしていきます。
**input type="button"**で属性を決めます。ここではボタンを
つけたいので、属性をbuttonとします。
**"onclick="onOff()"**は、クリックされたときに"onOff()"メソッドが呼ばれます。メソッドの処理は、scriptタグで書いていきます。
<script>
var cnt= 0;
function onOff(){
if(cnt == 1){
document.getElementById("gazou").style.visibility="visible";
{cnt = 0;}
}else{
document.getElementById("gazou").style.visibility="hidden";
{cnt++;}
}
}
</script>
まず最初に、ON/OFFの区別をつけるための変数cntを定義します。
そして、先ほど定義したonoffメソッドの中身を書いていきます。
**document.getElementById()**を使ってボタンのオブジェクトを登録します。
このコードは、cntの値が1の場合は、**style.visibility="visible";プロパティ
を使います。このプロパティは、登録されたidを持つ画像を表示してくださいという意味を持っており、対となるstyle.visibility="hidden";**は画像を非表示にしてくださいという意味を持っています。