課題【イベント操作】ーNo.04
課題内容
- ＜概要＞
- inputタグ（typeはtext）で入力項目を用意しましょう。
- 入力項目には、
- 「これは入力項目です」
- と表示させておきましょう。
- このinputタグに対して、
- inputというタグ指定で要素を取得して、
- 入力が可能な状態になった時に、
- 「入力可能な状態になりました」
- という文字列を、
- アラートとコンソールに、
- それぞれ表示しましょう。
出力結果
表示としては、
このような入力項目を表示して、
実際に入力できる状態になった時に、
コンソールに以下の表示を行います。
入力可能な状態になりましたポイント（イベント操作）
DOMのイベント操作に関しては、
- 対象のDOM操作の要素を取得する
- 要素のイベントの処理を設定する
を行うことで、
イベントを操作することができます。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
イベント操作（入力可能な要素が選択された時の操作）
イベント操作に関して、
「入力可能な要素が選択された時の操作」
に関しては、
イベント操作の中でも、
「focus」
を使って操作を行います。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" value="これは入力項目です">
</body>
<script type="text/javascript" src="sample.js"></script>
</html>javaScript
// DOMを取得する
let sample = document.querySelector('input[type="text"]');
// イベント操作
sample.addEventListener('focus', event => {
// コンソールに表示
console.log('入力可能な状態になりました');
});
初心者向けピックアップ
