javascript入門|表示非表示ボタンサンプル

IT
スポンサーリンク

今回はjavascpritの超便利な実戦で使えるサンプルをまとめます。

スポンサーリンク

表示非表示ボタンサンプル01

表示ボタン“を押すとマーカーの部分が表示され、”非表示ボタン“を押すと非表示になります。


表示されたり、消えたりする部分

HTML
<input type="button" value="表示" onclick="dispChange01(0)"</input>
<input type="button" value="非表示" onclick="dispChange01(1)"</input>
javascript
function dispChange01(num) {
	if (num == 0) {
		document.getElementById("test1").style.visibility="visible";
	}
	else {
		document.getElementById("test1").style.visibility="hidden";
	}
}

表示非表示ボタンサンプル02

表示ボタン“を押すとマーカーの部分が表示され、”非表示ボタン“を押すと非表示になります。


表示されたり、消えたりする部分

HTML
<input type="button" value="表示ボタン" onclick="dispChange02(0)"</input>
<input type="button" value="非表示ボタン" onclick="dispChange02(1)"</input>
javascript
function dispChange02(num) {
	if (num == 0) {
		document.getElementById("test2").style.display="block";
	} else {
		document.getElementById("test2").style.display="none";
	}
}

順次サンプルを乗せていく予定でしたが、AMPページでinputタグが使用できない?(方法はあるのかもしれない)ため、更新が極端に減る予定です。