[JavaScript] ボタンにclickイベントを設定する

投稿日：2017年11月21日更新日：2018年5月2日

ボタンにclickイベントを設定するサンプル２パターンのサンプルです。

サンプルソース

例１）ボタンタグにonclickを記述するパターン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
<script>
function showAlert(){
  alert("ボタンが押されました");
}
</script>
</head>
<body>
  <input type="button" value="ボタン" onclick="showAlert();">
</body>
</html>

<!DOCTYPE html>

<head>

function showAlert(){

alert("ボタンが押されました");

}

</script>

</head>

<body>

</body>

</html>

例２）ボタンタグにonclickを記述しないパターン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
<script>
window.onload = function(){
  document.getElementById("btn1").addEventListener("click", function(){
    alert("ボタンが押されました");
  });
}
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン">
</body>
</html>

<!DOCTYPE html>

<head>

window.onload = function(){

document.getElementById("btn1").addEventListener("click", function(){

alert("ボタンが押されました");

});

}

</script>

</head>

<body>

</body>

</html>

解説

例２のように、ボタンタグに直接記述しない方がJavaScriptとHTMLを分離でき、メンテナンス性がよくなるためお勧めです。

執筆者：とら