【Day4】Repeat Alert
次の課題はこんなかんじ。
テキストボックスを二つ用意して
一つ目のテキストボックスに打ち込まれた文字を二つ目のテキストボックスに打ち込まれた回数alertで繰り返し表示してみて
例えば test 3 って二つ打ち込まれとったら
testって書いたアラートが3回連続で表示される
今回はJavaScriptは別ファイルに書いて、HTMLに呼び込む感じで。
Language
HTML
JavaScript
My code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alert Counting</title>
<script src="myScript.js"></script>
</head>
<body>
<p>Type something.</p>
<form><input type="text" name="word" id="wd"></form>
<br>
<p>How many times do you want to show the word?</p>
<form><input type="text" name="number" id="nb"></form>
<br>
<input type="button" value="Enter" onClick="loop()">
</body>
</html>
JavaScript
function loop() {
var n = document.getElementById("nb").value;
function numb() {
var a = document.getElementById("wd").value;
alert(a);
}
for(var i = 0; i < n; i++){
numb();
}
}
Note
まずテキストボックスを押せばその内容がアラートにでるように設定。
これは何度かやっているので割とすんなりできた。
迷ったところ。
while なのかforなのか。
空のボックスに回数を打ち込むという意味では、最初から回数がきまっているわけではない。そう考えるとwhile? と思うが、このプログラムを実行するときには、ボックスには何かしらの値が入っており、回数が決まっているともいえる。
→forでよかった。
以下のような道筋で、一旦完成。
- HTMLでテキストボックス2つとボタン1つ作成。
- ボタンを読んだらloopがスタートするようにする。
- loop中身は、「アラートをn回出すこと」。
つまづいたところ
- nの定義はloop内かつfor以前にする。；はじめはfor 内で定義していた。。
- onClickに指定するのは、loop() はじめはnumb() を呼んでいた。。
今の所、時間がかかっているのは、
- functionについて調べること
- 道筋を考えること
- DOMとfunctionのちがい
Reference
Javascript loop function について
Loops and iteration - JavaScript | MDN
