JavaScript でボタンを切り替えます
このチュートリアルでは、JavaScript の条件ステートメントを使用してボタンを切り替える方法について説明します。
JavaScript で条件文を使用してボタンを切り替える
JavaScript の if-else ステートメントのような条件ステートメントを使用してボタンを切り替えることができます。JavaScript では、値、クラス、ID、色など、要素のほぼすべてのプロパティを切り替えることができます。
要素のプロパティを変更するには、ID またはクラスを使用して要素を取得する必要があります。さらに、プロパティ名を使用して、プロパティ値を変更できます。
たとえば、ボタンを作成し、if-else ステートメントと value プロパティを使用してその内部テキストを変更してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
上記のプログラムでは、Buttontoggle() 関数を作成しました。この関数は、ユーザーがボタンをクリックするたびに呼び出されます。ボタン内のテキストを切り替えます。
このコードを実行するには、このコードを HTML ファイルにコピーし、任意のブラウザーでファイルを開く必要があります。ボタンが表示されます。同様に、要素の任意のプロパティを切り替えることができます。if-else ステートメントの代わりに switch ステートメントを使用することもできます。それでは、ボタンと if-else ステートメントを使用してテキストを切り替えましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>
<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
if(t.innerHTML=="Some Text"){
t.innerHTML="Toggled Text";}
else{
t.innerHTML="Some Text";}
}
</script>
</html>
上記のコードでは、ボタンを使用して、その ID を使用して別の要素のテキストを切り替えました。getElementById プロパティは、その ID を使用して要素を取得するために使用され、innerHTML プロパティは、div 要素のテキストを取得するために使用されます。classList.toggle() プロパティを使用して、要素のクラスを切り替えることもできます。
たとえば、幅、パディング、背景色、色、フォントサイズなどのクラス myClass プロパティを設定するテキスト要素とスタイルシートを作成しましょう。これで、myClass クラスと classList.toggle() プロパティを使用して、div 要素のクラスを切り替えることができます。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>
<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
width: 50%;
padding: 33px;
background-color: green;
color: white;
font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
t.classList.toggle("myClass");
}
</script>
</html>
上記のプログラムでは、クラスを切り替えるために使用されるボタンと、クラスが切り替えられる div 要素を作成しました。スタイルシートを使用して、クラスのいくつかのプロパティを設定しました。これは、トグルボタンがクリックされたときにテキストに適用されます。
