14日目
やったこと
1章15.診断機能の開発
16 診断機能の組み込み の応用的なお遊び。
感想
ここ最近習ったことを自分なりに簡略化して、処理の流れが分かるようにする、しょうもないプログラムを作った。
test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>関数のテスト</title>
</head>
<body>
入力した数字に20を足すプログラムです<br>
<input type="number" id="a">
<button id="assessment">計算する</button>
<div id="result-area"></div>
<div id="result-area2"></div>
<script src="test1.js"></script>
</body>
</html>
test1.js
(function() {
'use strict';
const keisanInput = document.getElementById('a');
const assessmentButton = document.getElementById('assessment');
const resultDivided = document.getElementById('result-area');
const resultDivided2 = document.getElementById('result-area2');
assessmentButton.onclick = function() {
if (suchi.lenght === 0) {
return;
}
const result = keisan(suchi);
resultDivided.innerText = '計算結果';
resultDivided2.innerText = '答えは ' + result;
}
function keisan(suchi) {
let answer = suchi + 20;
return answer;
}
})();
スタイルシートを排除(指定はしているが中身は空)した簡素な素HTMLな感じだが、
input type="number"でテキストエリアに入力できる文字を数字に限ってみたり、
テキストエリアに入力された数字がそのままでは文字扱い?だったので数値に変換するparseInt()というのも使ってみたりした。
問題が一つあって、テキストエリアになにもいれなかった場合の結果がこれ。
if (suchi.lenght === 0) {
return;
}
入力された文字数が0ならば終了する、というような処理は書いているのだが動いていない?
テキストエリアの文字列を数値に変換したことによってか効かなくなったのだろうか?
suchi === 0や suchi === nullなども試してみたが動かなかった。
まあお遊びなので別に質問したりはしない
今日はまだまだ時間あるしプログラム触ってみるかな。