JavaScript でボタンがクリックされているかどうかを確認する
-
JavaScript で
onclickHTML 属性を使用してボタンクリックをチェックする -
JavaScript メソッドとして
onclickを使用する -
addEventListenerメソッドを使用してボタンのクリックをチェックする
JavaScript では、onclick メソッドと addEventListener がアクションを操作する最も一般的な方法です。
HTML 属性として onclick を使用して、ボタンがクリックされているかどうかを確認します。繰り返しになりますが、DOM を操作して onclick メソッドでチェックを続行し、後で addEventListener を使用してボタンクリックが機能しているかどうかを理解します。
JavaScript で onclick HTML 属性を使用してボタンクリックをチェックする
この例では、button タグ要素を取得し、属性 onclick を追加します。
この属性には、ボタンがクリックされるたびに呼び出される関数があります。onclick は完全に JavaScript メソッドですが、HTML 属性として、クリックイベントで指定された関数をトリガーするために使用するのはかなり一般的です。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
button{
background: gray;
outline: none;
border: none;
padding: 10px;
border-radius: 3px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn" onclick="clicked()">Click here</button>
<script>
const btn = document.getElementById('btn');
function clicked(){
btn.style.background = "purple";
console.log("CLICKED");
}
</script>
</body>
</html>
出力：
この例では、関数 clicked() には、ボタンがクリックされるたびに背景を灰色から紫色に変更するコード本体があります。
JavaScript メソッドとして onclick を使用する
JavaScript の onclick は、コールバック関数を呼び出す 1つのイベントのみに焦点を当てています。このメソッドは、メソッドの開始後に宣言される関数本体の実行にも重点を置いています。
ただし、最初に、onclick メソッドではオブジェクトを追跡する必要があります。HTML 要素の querySelector はここでオブジェクトを定義します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
button{
background: gray;
outline: none;
border: none;
padding: 10px;
border-radius: 3px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn">Click here</button>
<script>
const btn = document.getElementById('btn');
btn.onclick = function(){
btn.style.color = "yellow";
console.log("CLICKED!");
}
</script>
</body>
</html>
出力：
ここで、クリックイベントの発生は、コンソールに CLICKED!として出力されます。ボタンのスタイルも、フォントの色を白から黄色に変更します。btn.onclick メソッドは、対応する関数を実行するために開始されます。したがって、クリック後の変更が視覚化されます。
addEventListener メソッドを使用してボタンのクリックをチェックする
通常、addEventListener メソッドは古いブラウザではサポートされていませんが、複数のイベントをパンチすることができます。
ここでは、クリックという 1つのイベントを使用し、イベントが処理する関数がボタンを起動して変更します。また、イベントアクティビティについてより確実にするために、コンソールパネルに何かを出力します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
input{
background: gray;
outline: none;
border: none;
padding: 10px;
border-radius: 3px;
color: white;
cursor: pointer;
}
p{
background: white;
color: gray;
}
</style>
</head>
<body>
<input type="button" id="btn" value="Click Here">
<p id="after"></p>
<script>
const btn = document.getElementById('btn');
function getItDone(){
document.getElementById('after').innerHTML = "I am clicked."
console.log("CLICKED!");
}
btn.addEventListener('click', getItDone);
</script>
</body>
</html>
出力：
関連記事 - JavaScript Button
- JavaScript の非表示ボタン
- JavaScript ボタンのクリックを無効にする
- JavaScript を使用して Web ページに戻るボタンを作成する
- JavaScript の変更ボタンのテキスト
- JavaScript でボタンを切り替えます