HTML
JavaScript
Chrome

if文を使って電球画像を消したり表示したりする

初投稿です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";は画像を非表示にしてくださいという意味を持っています。