課題【練習問題（DOM操作/イベント操作）】ーNo.004
課題内容
- ＜概要＞
- 数値を入力するためのinputタグを準備しましょう。
- そのinputタグは、typeをnumberにしておきましょう。
- inputタグの初期値として「1」を設定しましょう。
- これとは別に、２つのボタンを用意しましょう。
- １つ目：「実行」という文字のボタン。
- ２つ目：「リセット」という文字のボタン。
- この２つのボタンを用意して、
- それぞれのボタンが押された時に、
- それぞれの処理を行ってみましょう。
- １つ目の「実行」ボタンが押された時は、
- input（number）の値を取得して、
- その値の数だけ、プロンプトを表示して値を取得しましょう。
- 取得した値は、全て文字列として連結して、
- 結果として表示しましょう。
- ２つ目の「リセット」ボタンが押された時は、
- 結果の値を空文字の表示（初期表示）に戻しましょう。
出力結果
初期表示として、
このような表示になるように、
HTMLで表示を作りましょう。
ボタンを押した時の表示の変更は、
以下のようになります。
ボタンを押した時
このボタンが押された時は、
入力の指定回数に設定されているinput（number）の値の回数だけ、
このプロンプトを表示して、
入力した値を取得しましょう。
この指定回数の入力した値は、
文字列として連結して結果に表示しましょう。
例えば、
input（number）で指定回数が「3」の時に、
プロンプトの入力として、
１回目：りんご
２回目：みかん
３回目：バナナ
という入力が行われた場合は、
結果として、
このように、
値の、「りんご」「みかん」「ばなな」を連結して、
結果として表示します。
また、
ボタンの「リセット」が押されたときは、
このように、
結果を空文字に戻して、
表示が上記のようになります。
実際の動きを確認（サンプルの動き）
サンプルの動きとして、
以下を参考にしてください。
ポイント（numberのinputタグの値の取得）
DOM操作で、
inputタグでも「number」を使った時の値の取得は、
「textContent」ではなく、「value」を使って取得します。
使い方としては、
以下を参考にしましょう。
答え
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Sample Dom/Event</title>
</head>
<body>
<div>
<label class="">入力の回数指定</label>
<input type="number" id="action-count" value="1"/>
</div>
<div>
<label class="text-result">結果:</label>
</div>
<div>
<button id="action-start">実行</button>
<button id="action-reset">リセット</button>
</div>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>javaScript
let sampleResult = document.querySelector('.text-result');
let sampleActionCount = document.querySelector('#action-count');
let sampleActionStart = document.querySelector('#action-start');
let sampleActionReset = document.querySelector('#action-reset');
const baseText = '結果；';
sampleActionStart.addEventListener('click',event => {
// 繰り返し回数を取得
let loopCount = sampleActionCount.value;
let resultValue = '';
// プロンプトを繰り返し
for(let idx=0;idx<loopCount;idx++) {
let val = prompt('値を入力してください');
resultValue = resultValue + val.toString();
}
// 表示を更新
sampleResult.textContent = baseText + resultValue;
})
sampleActionReset.addEventListener('click',event => {
// 表示を更新
sampleResult.textContent = baseText;
})初心者向けピックアップ
