プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

課題【イベント操作】ー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('入力可能な状態になりました');
});

初心者向けピックアップ

-->

人気記事(学ぶパンダ)