課題【イベント操作】ーNo.02

課題内容

  • ＜概要＞
  • 　buttonタグに対して、
  • 　「target-class」というクラスを、
  • 　設定したボタンを用意しましょう。
  • 　ボタンの文字には、
  • 　「クリックしてください」
  • 　と表示させましょう。
  • 　このbuttonタグに対して、
  • 　buttonという「クラス指定」で要素を取得して、
  • 　「クリック」された時に、
  • 　「ボタンがクリックされました」
  • 　という文字列を、
  • 　アラートとコンソールに、
  • 　それぞれ表示しましょう。
  • 　　

出力結果

表示としては、

このようなボタンが表示され、

クリックした時に、

このように表示されます。

コンソールには、

以下のように表示されます。

ボタンがクリックされました

ポイント（アラート表示）

アラートの表示に関しては、

javaScriptとして、

alert('アラート表示します');

このように、

「alert」を使用することで、

アラート表示することができます。

ポイント（イベント操作）

DOMのイベント操作に関しては、

  • 対象のDOM操作の要素を取得する
  • 要素のイベントの処理を設定する

を行うことで、

イベントを操作することができます。

このイベント操作の方法に関しては、

以下の記事を参考にしてください。

【基礎を抑える_06】「イベント操作」

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- DOM操作 -->
    <button class="target-class">クリックしてください</button>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

javaScript

// DOMを取得する
let sample = document.querySelector('.target-class');

// 取得した要素に「click」イベントを設定
sample.addEventListener('click', event => {
  // アラートに表示
  alert('ボタンがクリックされました');

  // コンソールに表示
  console.log('ボタンがクリックされました');
});