はじめに
JavaScript＋Microsoft Edgeを使用したスクリプト開発ということで、Webサービスを使用したスクリプトで必要そうな機能を試していこうと思います。
まずは、ボタンを押してスクリプトを実行するといったことはよくすると思いますので、onclick属性を使用していこうと思います。
onclick属性よりも、addEventListenerを追加するほうが最近のやり方と思いますが、まずはonclickから始めます。
今回実施する内容
HTMLのボタンにonclick属性を付加し、クリックしたときに関数を実行します。
もう少し具体的には、「入力」のInputフィールドに入力して、「実行」ボタンを押すと、「結果」に、入力した値を表示します。
ソースコード(Git Hub)
- onclickEvent.html
- onclickEvent.js
環境
OS: Windows 11 JP (64bit)
Microsoft Edge: バージョン 119.0.2151.58 (公式ビルド) (64 ビット)
参考
用語
ボタンにonclick属性を設定して、ボタンを押して関数を実行
onclickの動作
<input type="button" onclick="関数()" value="実行">
上記のように（inputタグを使っていますが）ボタンにonclick属性を追加して、「関数()」を記載します。
関数は、JavaScriptで記載します。
これで、上記のボタンを押すと、「関数」が実行されます。
サンプルプログラム
onclickEvent.htmlのソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onclick event</title>
<script src="onclickEvent.js" defer></script>
</head>
<body>
<input id="btn" type="button" value="実行" onclick="btnClick()">
<br>
<label for="value">入力</label>
<input id="value" type="text" />
<br>
結果
<p id="output"></p>
</body>
</html>
onclickEvent.htmlの説明
特に説明するほどのことはないのですが・・・
-
ヘッダー部のscriptタグには、
onclickEvent.jsのスクリプトを設定します。 -
inputタグで、「実行」のボタンを作成します。
-
inputタグは、onclick属性で関数を記載します。
onclick="btnClick()" -
もうひとつのinputタグで、テキスト入力を作成し、
id="value"とします。 -
pタグは、結果を表示するために使用し、idタグを
id=outputと追加します。
onclickEvent.jsのソース
function btnClick() {
document.getElementById("output").textContent = document.getElementById("value").value;
};
onclickEvent.jsの説明
-
document.getElementById("output").textContentは、onclickEvent.htmlのpタグのコンテンツを示し、そこに、document.getElementById("value").valueの値を設定します。
おわりに
HTMLのonclick属性を使用して、JavaScriptの関数を実行するコードを記載しました。
onclick属性はかなり昔からある属性ですが、久しぶりにHTMLやJavaScriptを書いてみて、今も使えるんだなと驚きでした。