【Day5】累乗しつづける
次の課題はこんなかんじでした。
ちょっと時間かかったなあ。
テキストボックスを一つ用意して、
そこに打ち込んだ数字を1000を超えるまで自分の累乗をしていって、その都度途中の値をconsole.logで出力するプログラムを作る
例えば5って打ち込まれてなんかexecuteみたいなボタン押したら 5 25 125 625 3125 って表示してストップする。これをwhileっていうのを使ってやってみて
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>consnole.log</title>
<script src="myConsoleLog.js"></script>
</head>
<body>
<form>
<input type="text" name="number" id="nb" onChange=loop()>
</form>
<br>
</body>
</html>
JavaScript
function loop(){
var n = document.getElementById("nb").value;
var r = 1;
do {
r++;
console.log(r);
x=Math.pow(n,r);
console.log(x)
} while(x<1000)
}
ちなみに
x=Math.pow(n,r);
の箇所を
x=n**r;
としても同じ挙動になった。
Note
考え方としては、
計算結果xが1000をこえるまで、nをr回累乗する、という考えでやりました。
累乗だけしらべると、結構でてきました。
Mathpow(n,r)
もしくは、n**rで計算できると。
なんですけど、rが増え続ける設定をしてもなかなか累乗にならなかった。
自分は最初このように書いていた。
function loop(){
var n = document.getElementById("nb").value;
var r = 1;var i = Math.pow(n,r); // i が1000未満まで計算をし続ける、という関数の中に肝心の「計算」を入れ損ねている
while (i < 1000){
console.log(i);
r++;
}
}
while以下に、累乗計算指示そのものの式をいれていなかったがために、
rだけは増えるが、r回累乗をするというところまでは辿りついていなかった模様。
HTMLというのは上から読まれていく
一度、JavaScriptファイル上からfunction loop() {}を削除し、
それにともなって、HTMLのonChange="loop()"も消してしまった。
累乗で検索したときに、書いていない参考サイトがおおかったのでいらんのかなとおもったんで。
そうなると以下のようなエラーがでてきた。
HTMLの基本として上から読まれていくらしい。
function loop(){}を外してしまったことで、
上から読んで行ったときに、<script src></script>内にあるJacaScriptのファイルを読みにきた。
そして1行目の、
var n = document.getElementById("nb").value;
の指示を受けて"nb"の値をもってこようとする。
しかし、この時点でHTMLの読み込みはscriptタグまでであり、bodyの下の方に記載してあるinputタグ内のid要素は、世に存在していないことになる。
であるからして、
探したけどない！ないものを指示するな！とご立腹なわけだそう。
そういうときにnullと返答してくるらしい。
そうかー、オコだったのかーごめんよ。。
しかし、JavaScriptの1行目をfunction loop(){}で始めておけば、
「あ、function loop()の指示があるまでは待っていたらいいのね、りょ。」
と納得して次に進んでくれるらしいのだ。
cかわいらしい。
Reference
Loops and iteration - JavaScript | MDN
