甘くてさくさく?んなわきゃない

N予備校日記、その他雑記、備忘録

14日目

やったこと

1章15.診断機能の開発

   16 診断機能の組み込み の応用的なお遊び。

感想

ここ最近習ったことを自分なりに簡略化して、処理の流れが分かるようにする、しょうもないプログラムを作った。

f:id:amakute_saksak:20190215200059j:plain

keisan プログラム

test1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>関数のテスト</title>
<link rel="stylesheet" href="test1.css">
</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() {
const suchi = parseInt(keisanInput.value);
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()というのも使ってみたりした。

問題が一つあって、テキストエリアになにもいれなかった場合の結果がこれ。

f:id:amakute_saksak:20190215201052j:plain

NaN
if (suchi.lenght === 0) {
return;
}

 

 入力された文字数が0ならば終了する、というような処理は書いているのだが動いていない?
テキストエリアの文字列を数値に変換したことによってか効かなくなったのだろうか?
suchi === 0や suchi === nullなども試してみたが動かなかった。
まあお遊びなので別に質問したりはしない
今日はまだまだ時間あるしプログラム触ってみるかな。