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

プログラミング

2020.02.20 2018.10.01

この記事は約2分で読めます。

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

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

表示非表示ボタンサンプル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タグが使用できない？（方法はあるのかもしれない）ため、更新が極端に減る予定です。