ボタンをクリックするとJavaScript関数を呼ぶやり方について解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、ボタンをクリックするとJavaScript関数を呼ぶやり方について、サンプルプログラムをまじえて解説していきます。

前提条件：実行環境について
ボタンをクリックするとJavaScript関数を呼ぶやり方を解説
ボタンをクリックするとJavaScript関数を呼び方を解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：ボタンをクリックしてJavaScript関数を呼ぶにはonclickを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

ボタンをクリックするとJavaScript関数を呼ぶやり方を解説

ボタンをクリックするとJavaScript関数を呼ぶやり方を解説します。

JavaScript関数を呼ぶには、ボタンにonclickイベントを追加します。
サンプルは以下になります。

<input type="button" onclick="sample()">

1	<input type="button" onclick="sample()">

上記のボタンだとクリックしたとき、sample関数を呼び出します。
関数を指定するとき、関数名の後ろに()を記載しないと動作しないのでご注意ください。

では、次の章で実際に使ってみます。

ボタンをクリックするとJavaScript関数を呼び方を解説するプログラムの概要

ボタンをクリックするとJavaScript関数を呼び方を解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

HTMLでボタンを押すと、JavaSscriptの関数を呼び出します。

フォルダ構成は以下のようになっています。
onclickでJavaScript呼び出しを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>onclickサンプル</title>
        <script src="js/sample_javascript.js"></script>
    </head>
    <body>
        <p>ボタンを押してください</p>
        <input id="button1" type="button" value="ボタンを押す" onclick="alertButton()">
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>onclickサンプル</title>

</head>

<body>

<p>ボタンを押してください</p>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

function alertButton(){
    alert('ボタンが押されました');
}

function alertButton(){

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

}

alertメソッドについては、こちらの記事をご参考ください。

【JavaScript】アラートを表示できるalertメソッドを解説します

実行結果

作成したHTMLをブラウザで開き、【ボタンを押す】ボタンを押します。
HTMLを表示

指定したJavaScript関数が呼び出され、アラートが表示できたことが確認できました。
ボタンを押してonclickからJavaScript関数の呼び出し

まとめ：ボタンをクリックしてJavaScript関数を呼ぶにはonclickを使ってみよう

以上がボタンをクリックするとJavaScript関数を呼ぶやり方についての解説でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ