[JavaScript]　計算機を作ったが数字表示がうまくいかない

JavaScriptで計算機を作りました。
半角数字かつ0以上の数値のみ計算が可能という条件付きです。

条件そのものはクリアしたのですが、
数値入力の際に最初の[0]が残ってしまいます(01→1扱いなど)

修正を何日か行いましたが前に進まない状態です。
下記に作成プログラムを掲載しますので解決方法をご享受頂けると幸いです。

以上、よろしくお願いします。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>計算機</title>
6<link rel="stylesheet" type="text/css" href="keisan.css">
7<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
8<script type="text/javascript" src="keisan.js"></script>
9</head>
10	<body>
11		<form name="keisan_form" action="keisan.html">
12			<div class = "nyuryoku1">
13				<input type="text" name="text1" onKeyUp = "checkNum(this)">+
14			</div>
15			<div class = "nyuryoku2">
16				<input type="text" name="text2" onKeyUp = "checkNum(this)">=
17			</div>
18			<div class = "kekka">
19				<textarea name="kekka" cols="10" rows="1"></textarea>
20			</div>
21            <div class = "button">
22				<input id = "button1" type = "button" value = "計算ボタン" onclick = "keisan()">
23				<input id = "button2" type = "reset" value = "リセット" />
24            </div>
25		</form>
26	</body>
27</html>
28

CSS
1@charset "UTF-8";
2.nyuryoku1{
3	float:left;
4}
5.nyuryoku2{
6	float:left;
7}
8.kekka{
9	float:left;
10}
11.button{
12	clear:left;
13}
14#button1{
15	float:left;
16	margin-right:70px;
17	margin-left:30px;
18	cursor:pointer;
19}
20#button2{
21	float:left;
22	cursor:pointer;
23}

JavaScript
1var num1,num2,goukei;
2//入力エリア1,2の値が数値かどうか判断
3function keisan(){
4	//入力エリア1,2が共に数値なら計算
5	if((isNumber(keisan_form.text1.value) == true) && (isNumber(keisan_form.text2.value) == true)){
6		num1 = Number(keisan_form.text1.value);
7		num2 = Number(keisan_form.text2.value);
8		goukei = num1 + num2;
9		keisan_form.kekka.value = goukei;
10	//計算不可なら警告
11	}else{
12		alert("入力できるのは0以上の半角数値のみです");
13		keisan_form.text1.value = "";
14		keisan_form.text2.value = "";
15		keisan_form.kekka.value = "";
16	}
17}
18
19function checkNum(btn){
20	if(btn == "0"){
21		}
22}
23
24function isNumber(n){
25  //負数なら
26  if(Number(n) < 0){
27	return false;
28  }
29  //数値以外またはブランク
30  if(isNaN(Number(n)) || isNaN(eval(n))){
31	return false;
32  }
33 //数値なら
34  return true;
35}

行動規範の内容に同意します

回答2件

checkNumを以下のように修正すると、「02」と入力されたものを「2]と表示します。

javascript
1function checkNum(btn){
2  if(isNumber(btn.value) && btn.value.slice(-1) !== ".") {
3    btn.value = parseFloat(btn.value);
4  }
5}

もしやりたいことが違っていたらすみません。

投稿2016/09/26 03:22

編集2016/09/26 04:28

ijufumi

総合スコア276

seint.k

2016/09/26 04:21

ご回答ありがとうございます。 01→1と確かに思っていた通りに動作するのですが、0.1と入力したら1と認識されます。

ijufumi

2016/09/26 04:28

小数点を入力できるように修正してみました。

coco_bauer

2016/09/26 05:28

「半角数字かつ0以上の数値のみ計算が可能」が条件なのですから、半角数字ではない小数点が入力されたらエラーにするというのが、質問に書かれた要件のように思われます。質問者の意図を理解できている訳では無いですが。。。。

seint.k

2016/09/26 05:51

おっしゃる通りです。なので、0以上の半角数字以外の入力は計算ボタンを押すとアラートが出ます。 01と入力しても1と認識はするが、不格好なので01を1と自動表示させたい .01と入力しても0.01と認識はするが、同じく0.01と自動表示させたいという事が質問の意図でした。伝わりづらく申し訳ございません。

coco_bauer

2016/09/26 05:56

質問を加筆修正して、なにがしたいのかを明確に示して下さい。誰もがコメントを全て読むわけではありませんから。

行動規範の内容に同意します

ベストアンサー

まず、0-9以外は排除し、0の後に数字が来た場合数値化すればよいでしょう

javascript
1function checkNum(btn){
2  if(btn.value.match(/^0[0-9]+$/)){
3    btn.value=parseInt(btn.value);
4  }
5  if(btn.value.match(/[^0-9]/)){
6    btn.value=btn.value.replace(/[^0-9]/,'');
7  }
8}