課題【イベント操作】ーNo.02
課題内容
- ＜概要＞
- buttonタグに対して、
- 「target-class」というクラスを、
- 設定したボタンを用意しましょう。
- ボタンの文字には、
- 「クリックしてください」
- と表示させましょう。
- このbuttonタグに対して、
- buttonという「クラス指定」で要素を取得して、
- 「クリック」された時に、
- 「ボタンがクリックされました」
- という文字列を、
- アラートとコンソールに、
- それぞれ表示しましょう。
出力結果
表示としては、
このようなボタンが表示され、
クリックした時に、
このように表示されます。
コンソールには、
以下のように表示されます。
ボタンがクリックされましたポイント（アラート表示）
アラートの表示に関しては、
javaScriptとして、
alert('アラート表示します');このように、
「alert」を使用することで、
アラート表示することができます。
ポイント（イベント操作）
DOMのイベント操作に関しては、
- 対象のDOM操作の要素を取得する
- 要素のイベントの処理を設定する
を行うことで、
イベントを操作することができます。
このイベント操作の方法に関しては、
以下の記事を参考にしてください。
答え
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('ボタンがクリックされました');
});
初心者向けピックアップ
