課題【練習問題（DOM操作/イベント操作）】ーNo.001
課題内容
- ＜概要＞
- 文字を表示するlabelタグを準備しましょう。
- 初期表示として「初期のテキスト」と表示しましょう。
- そして、３つのボタンを用意します。
- １つ目：「りんごに変更」という文字のボタン。
- ２つ目：「バナナに変更」という文字のボタン。
- ３つ目：「みかんに変更」という文字のボタン。
- この３つのボタンを用意して、
- それぞれのボタンが押された時に、
- labelの文字を書き換えてみましょう。
- ボタンが押された時の変更は、
- １つ目が押された：文字を「りんご」に変更」
- ２つ目が押された：文字を「バナナ」に変更」
- ３つ目が押された：文字を「みかん」に変更」
- という変更をしてみましょう。
- また、それぞれのボタンで文字を変更した時に、
- コンソールにも、
- 「文字をXXに変更しました」
- （りんご、バナナ、みかん）
- という表示を行いましょう。
出力結果
初期表示として、
このような表示になるように、
HTMLで表示を作りましょう。
ボタンを押した時の表示の変更は、
以下のようになります。
「りんご」に書き換える場合
このボタンが押された時は、
この初期の文字列を、
に変更します。
そして、コンソールには、
文字をりんごに変更しました「バナナ」に書き換える場合
このボタンが押された時は、
この初期の文字列を、
に変更します。
そして、コンソールには、
文字をバナナに変更しました「みかん」に書き換える場合
このボタンが押された時は、
この初期の文字列を、
に変更します。
そして、コンソールには、
文字をみかんに変更しました実際の動きを確認（サンプルの動き）
サンプルの動きとして、
ポイント（文字列の置換）
文字列を取得したり、置換するには、
DOM操作の中でも、
「textContent」
を使うことで、文字列を操作することができます。
この「textContent」に関しては、以下を参考にしてください。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
<title>js-kadai22</title>
</head>
<body>
<div>
<label>初期のテキスト</label>
</div>
<div>
<button id="change-text1">りんごに変更</button>
<button id="change-text2">バナナに変更</button>
<button id="change-text3">みかんに変更</button>
</div>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>javaScript
let sampleBase = document.querySelector('label');
let sampleButton1 = document.querySelector('#change-text1');
let sampleButton2 = document.querySelector('#change-text2');
let sampleButton3 = document.querySelector('#change-text3');
sampleButton1.addEventListener('click',event => {
sampleBase.textContent = 'りんご';
})
sampleButton2.addEventListener('click',event => {
sampleBase.textContent = 'バナナ';
})
sampleButton3.addEventListener('click',event => {
sampleBase.textContent = 'みかん';
})初心者向けピックアップ
