質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    9000questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6723questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5809questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

jQueryを使った電卓作成。小数点を含めると計算が出来ない

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 400

kato00

score 38

質問は表題の通りです。

課題で電卓をjQueryで作っています。

電卓のデザインは添付画像の通りです。

イメージ説明

整数+整数の四則演算は概ね完成に近いのですが、
小数点が入る数値の計算が出来ません。

成功パターン① 10 - 0.5 = 9.5

エラーパターン① 10 + 0.5 = 100.5 という表示になる。
エラーパターン② 1.5 + 1.5 = 1.51.5   という表示になる。
エラーパターン③ 1.5 を入力後、6という数値を入力すると 21という数値がディスプレイにでる。

とりあえず私が確認できているエラーパターンは上記になります。

必要箇所のみのコードを添付したかったのですが、どこが間違っているのか分からなかったので、長くなりますが、全てのコードを添付致しました。

その他必要情報がありましたら追記いたしますのでおっしゃってください。

宜しく御願いします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="stylesheet" type="text/css" href="base.css"><!--最後に読み込んだものが適用される-->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script>

$(function(){

var number = 0;
var totalnumber = 0;

var purasu = 0;
var purasunamber = 0;

var hiku = 0;
var hikunamber = 0;

var kakeru = 0;
var kakerunamber = 0;

var waru = 0
var warunamber = 0;

var totalnumbernibai = 0;
var purasumainasu = 0;
var parsent = 0;
var isdotted = 0;


// 数値の取得(通常時)
$("#numberArea p").on('click',function(){
  if(isdotted == 0){
    number = $(this).data('index');//数値の取得
    totalnumber = (totalnumber * 10) + number;//桁数を増やす為の桁上げと文字の連結
    $("#displayWrapper p").text(totalnumber);
    alert('isdottedの番号' + isdotted);
    alert('totalnumberは' + totalnumber);
    alert('totalnumberの型式 ' + jQuery.type(totalnumber));
  }
});

// 数値の取得(ドットの後)
$("#numberArea p").on('click',function(){
  if(isdotted == 1){
    // totalnumber = parseInt($(this).text());
    number = $(this).data('index');//数値の取得
    totalnumber = totalnumber + number;//桁数を増やす為の桁上げと文字の連結
    $("#displayWrapper p").text(totalnumber);
    isdotted = 0;

    alert('totalnumberは' + totalnumber);
    alert('totalnumberの型式 ' + jQuery.type(totalnumber));
  }else{

  }

});

// ドットの処理
$('#dotto').on('click',function(){
  if(isdotted == 1){

  alert(isdotted);

  }else{

  totalnumber = totalnumber + '.';
  $("#displayWrapper p").text(totalnumber);
  isdotted = 1;
  alert('isdotted' + isdotted)
  alert('totalnumber' + totalnumber)
  alert('totalnumberの型式' + jQuery.type(totalnumber));

}});



// +ボタンを押した時
$("#purasu").on('click',function(){
purasu = 1;
alert('purasuの数値' + purasu);
$("#displayWrapper p").text('+');
purasunamber = totalnumber;//一回前番号入れる
alert("purasunamberは" + purasunamber);
totalnumber = 0;
});

// -ボタンを押したとき
$("#hiku").on('click',function(){
hiku = 1;
alert('hikuの数値' + hiku);
$("#displayWrapper p").text('-');
hikunamber = totalnumber;
alert("hikunamberは" + hikunamber);
totalnumber = 0;
})

// ×ボタンを押したとき
$("#kakeru").on('click',function(){
kakeru = 1;
alert('kakeruの数値' + kakeru);
$("#displayWrapper p").text('×');
kakerunamber = totalnumber;
alert("kakerunamberは" + kakerunamber);
totalnumber = 0;
})


//÷ボタンを押したとき
$("#waru").on('click',function(){
waru = 1;
alert('waruの数値' + waru);
$("#displayWrapper p").text('÷');
warunamber = totalnumber;
alert("warunamberは" + warunamber);
totalnumber = 0;
})


//=ボタンを押した時
$("#iko-ru").on('click',function(){
// alert("イコール")
if(purasu == 1){
  alert("purasunamberは" + purasunamber);
  alert("totalnumberは" + totalnumber);
  totalnumber = purasunamber + totalnumber;
  $("#displayWrapper p").text(totalnumber);
  purasu = 0;
}

if(hiku == 1){
  alert("hikunamberは" + hikunamber);
  alert("totalnumberは" + totalnumber);
  totalnumber = hikunamber - totalnumber;
  $("#displayWrapper p").text(totalnumber);
  hiku = 0;
}

if(kakeru == 1){
  alert("kakeruは" + kakeru);
  alert("totalnumberは" + totalnumber);
  totalnumber = kakerunamber * totalnumber;
  $("#displayWrapper p").text(totalnumber);
  kakeru = 0;
}

if(waru == 1){
  alert("waruは" + waru);
  alert("totalnumberは" + totalnumber);
  totalnumber = warunamber / totalnumber;
  $("#displayWrapper p").text(totalnumber);
  waru = 0;
}


});


// ACボタン
$("#AC").on('click',function(){
totalnumber = 0;
// alert(totalnumber);
$("#displayWrapper p").text(totalnumber);
});


// プラマイボタン押した時
$("#±").on('click',function(){
  if($(this).hasClass('mainasu')){
    $(this).removeClass('mainasu')
$("#displayWrapper p").text(totalnumber);
  }else{
    // alert(totalnumber);
    totalnumbernibai = totalnumber * 2;
    purasumainasu = totalnumber - totalnumbernibai;
    // alert(purasumainasu);
    $("#displayWrapper p").text(purasumainasu);
    $(this).addClass('mainasu')
  }
});


// %ボタン押した時
$("#parsent").on('click',function(){
parsent = totalnumber * 0.01;
$("#displayWrapper p").text(parsent);
})



});

</script>

</head>

<body>
  <div id="bodyWrapper">
    <div id="displayWrapper">
        <p>
0
        </p>
      </div>

<div id="wrapper">

      <div id="Leftwrapper">
        <div id="operatorWrapper">
          <div id="AC">
            <p>
              AC
            </p>

          </div>

          <div id="±">
            <p>
              ±
            </p>

          </div>

          <div id="parsent">
            <p>
              %
            </p>
          </div>
        </div><!--operatorWrapper閉じタグ-->


          <div id="numberArea">
            <div id="number7" >
              <p data-index=7>
                7
              </p>
            </div>

            <div id="number8">
              <p data-index=8>
                8
              </p>
            </div>

            <div id="number9">
              <p data-index=9>
                9
              </p>
            </div>
            <div id="number4">
              <p data-index=4>
                4
              </p>
            </div>

            <div id="number5">
              <p data-index=5>
                5
              </p>
            </div>

            <div id="number6">
              <p data-index=6>
                6
              </p>
            </div>

            <div id="number1">
              <p data-index=1>
                1
              </p>
            </div>


            <div id="number2">
              <p data-index=2>
                2
              </p>
            </div>

            <div id="number3">
              <p data-index=3>
                3
              </p>
            </div>

            <div id="number0">
              <p data-index=0>
                0
              </p>

            </div>

            <div id="kara">
              <p>

              </p>

            </div>


            <div id="dotto">
                .
            </div>

          </div><!--numberArea閉じタグ-->

        </div><!--Leftwapper閉じタグ-->

      <div id="Arithmetic">
        <div id="waru">
          <p>
            ÷
          </p>
        </div>

        <div id="kakeru">
          <p>
            ×
          </p>
        </div>

        <div id="hiku">
          <p>
            -
          </p>
        </div>

        <div id="purasu">
          <p>
            +
          </p>
        </div>

        <div id="iko-ru">
          <p>
            =
          </p>
        </div>

      </div>

    </div><!--wrapper-->
    </div><!--bodyWrapper閉じタグ-->



  </body>
  </html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

「小数点」という風に 作る側、使う側は思っていてもプログラムにとっては「.」という単なる文字列です。
型としてきちんとプログラムに認識させる必要があります。

小数点の場合はParseFloatですかね。

「小数点が入っている」という判定をした上でParseIntと使い分けが必要となりますね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

JavaScriptで小数点を扱いたい時は自分で計算せずに、decimal.jsを使ってくださいな。

以下にテストデータサンプルを置いておきます。
a,0.1 * 0.1 → 0.01
b,24716*0.7 → 17301.2

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

Number()を使って、数値変換するのがいいかと

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9000questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6723questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5809questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。