JavaScript でボタンがクリックされているかどうかを確認する
-
JavaScript で
onclick
HTML 属性を使用してボタンクリックをチェックする -
JavaScript メソッドとして
onclick
を使用する -
addEventListener
メソッドを使用してボタンのクリックをチェックする
![JavaScript でボタンがクリックされているかどうかを確認する](/img/JavaScript/feature-image---check-whether-a-button-is-clicked-by-javascript.webp)
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 でボタンを切り替えます