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

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

ただいまの
回答率

88.04%

【JS】数値の足し算が計算されず、文字列結合のように数字が並ぶだけになる

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 3,706

score 85

こんにちわ。
プログラミング初心者で、JavaScriptの勉強中です。

ローカルストレージを使って何かアプリを作ってみようと思い、
勝ち数がローカルストレージに記録されるようなじゃんけんアプリを作っているのですが、
なぜか足し算がうまくいかず困っています。。。
(プレイヤーA(自分)がプレイヤーB(ランダムに手を出す)とじゃんけんします。)

【本題】


プレイヤーAの勝率を出したく、

aRate(プレイヤーAの勝率)= aKachisu(Aの勝ち数) + bKachisu(Bの勝ち数) + hikiwakeSu(引き分け数)

と計算しているのですが、

例えば
aKachisu=2
bKachisu=3
hikiwakeSu=1
のとき、

aRate=231

となってしまいます。

aKachisu、bKachisu、hikiwakeSuをisNaNで調べたのですが、
falseが返ってきてるので、数値として認識されているはずなのですが。。。

どこに原因がありそうでしょうか?
どなたかご教示頂けますと幸いです。

ちなみにMacでChromを使っています。

下記に、少し長いですが、
前後のプログラムを掲載しております。

何卒よろしくお願い致します。

<body>
    <script type="text/javascript">
        $(function(){
            var selectNum;
            var hand = ["ぐー","ちょき","ぱー"];
            var shouhai = ["勝利!","引き分けだ!","負け!"];
            var hanteiHaitretu = [
                [shouhai[1],shouhai[0],shouhai[2]],
                [shouhai[2],shouhai[1],shouhai[0]],
                [shouhai[0],shouhai[2],shouhai[1]]];
            
            //勝敗関連
            var aKachisu;
            var bKachisu;
            var hikiwakeSu;
            var aRate;
            var bRate;
            var aRateText = document.getElementById('aKachiRate');
            var bRateText = document.getElementById('bKachiRate');
            
            //ページ読み込み時
            $(window).on("load",function(){
                if(localStorage.getItem("a")){
                    aKachisu = localStorage.getItem("a");
                } else {
                    aKachisu = 0;
                }
                
                if(localStorage.getItem("b")){
                    bKachisu = localStorage.getItem("b");
                } else {
                    bKachisu = 0;
                }
                
                if(localStorage.getItem("hikiwake")){
                    hikiwakeSu = localStorage.getItem("hikiwake");
                } else {
                    hikiwakeSu = 0;
                }
                
               if((aKachisu == 0)&&(bKachisu == 0)&&(hikiwakeSu == 0)){
                    aRateText.innerHTML = 0;
                    bRateText.innerHTML = 0;
                } else {
                    aRate = aKachisu/(aKachisu+bKachisu+hikiwakeSu)*100;
                    bRate = bKachisu/(aKachisu+bKachisu+hikiwakeSu)*100;

                    aRateText.innerHTML = aRate;
                    bRateText.innerHTML = bRate;
                }
            });
            
            //勝ち負け判定
            function hanteiFunc(n) {
                selectNum = Math.floor(Math.random() * 3);
                $("#aHand").html(hand[n]);
                $("#bHand").html(hand[selectNum]);
                $("#kekka").html(hanteiHaitretu[n][selectNum]);
                
                if((n-selectNum == -1) || (n-selectNum == 2)) {
                    aKachisu++;
                }else if((n-selectNum == 1) || (n-selectNum == -2)) {
                    bKachisu++;
                } else {
                    hikiwakeSu++;
                }
                
                localStorage.setItem("a",aKachisu);
                localStorage.setItem("b",bKachisu);
                localStorage.setItem("hikiwake",hikiwakeSu)
                
                aRate = aKachisu/(aKachisu + bKachisu + hikiwakeSu)*100;  //★ここのaKachisu + bKachisu + hikiwakeSuがうまく計算されません…!
                bRate = bKachisu/(aKachisu + bKachisu + hikiwakeSu)*100;
                
                aRateText.innerHTML = localStorage.getItem("a");
                bRateText.innerHTML = localStorage.getItem("b");
            }
            
            $("#gu").click(function(){
                hanteiFunc(0);
            })
            
            $("#choki").click(function(){
                hanteiFunc(1);
            })
            
            $("#pa").click(function(){
                hanteiFunc(2);
            })
        });
    </script>
    <div>aの勝率:<span id="aKachiRate"></span>%</div>
    <div id="aHand"></div>
    <div>bの勝率:<span id="bKachiRate"></span>%</div>
    <div id="bHand"></div>
    <p>以下から選んでclick!!</p>
    <div id="gu">gu</div>
    <div id="choki">choki</div>
    <div id="pa">pa</div>
    <div id="kekka"></div>
    
</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+4

aKachisu = localStorage.getItem("a"); なので、aKachisuは文字列型になります。
isNaN()は、浮動小数点の「非数」かどうかを判断するものです。
型の判断は、typeof()を使ってください。

aKachisu = +localStorage.getItem("a"); にすればいいかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/08/08 19:57

    otnさん

    ありがとうございます!!!!
    無事意図するように動きました!!!!
    2,3時間ほど悩んでいたのが6分で解決するとは…!!

    ちなみに、
    localStorage.getItem("a")だと文字列として取得されて、
    +localStorage.getItem("a")だと数値として取得されるという認識であっていますでしょうか??

    また、
    >isNaN()は、浮動小数点の「非数」かどうかを判断するものです。

    こちらもありがとうございます!!
    ググって調べてたらisNaN()で数値がどうか判定できるとあったので使ってみたのですが…
    http://mask.hatenadiary.com/entry/2013/12/14/231916

    鵜呑みもまずいってことですかね。。。

    とてもとても助かりました!
    本当にありがとうございます!!

    キャンセル

  • 2015/08/08 20:20

    > isNaN()で数値がどうか判定できる
    引数が文字列の場合でも先頭の方が数字なら真ですので、型の判断には使えません。

    > +localStorage.getItem("a")だと数値として取得される
    いえ。文字列として取得して、単項演算子+でそれを数値化します。関数だと、Number()とかparseInt()とか。

    キャンセル

  • 2015/08/09 14:30

    >引数が文字列の場合でも先頭の方が数字なら真ですので、型の判断には使えません。
    なるほど…!!そうなんですね!isNaN()の使い方勉強してみます!

    >文字列として取得して、単項演算子+でそれを数値化します。関数だと、Number()とかparseInt()とか。
    そうゆう意味での「+」なのですね!また、関数使っても動きました!!

    とても丁寧な解説ありがとうございます!!

    キャンセル

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

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

関連した質問

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