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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

GsACADEMY

セカイを変えるエンジニア【GEEK】を養成する 授業料後払いのエンジニア養成学校です。 ①一流企業によるメンター指導 基本習得後は2ヶ月間メンターの個別指導でサービス完成を目指します。 ②480万円までの起業支援出資 起業志望者をサムライインキュベートが支援(審査あり)します。 ③初心者歓迎・授業料後払い 丸暗記ではなく、創りながら。初心者のための授業料後払い制度です。

Q&A

解決済

1回答

5211閲覧

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

u_sa9n

総合スコア85

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

GsACADEMY

セカイを変えるエンジニア【GEEK】を養成する 授業料後払いのエンジニア養成学校です。 ①一流企業によるメンター指導 基本習得後は2ヶ月間メンターの個別指導でサービス完成を目指します。 ②480万円までの起業支援出資 起業志望者をサムライインキュベートが支援(審査あり)します。 ③初心者歓迎・授業料後払い 丸暗記ではなく、創りながら。初心者のための授業料後払い制度です。

0グッド

1クリップ

投稿2015/08/08 10:21

こんにちわ。
プログラミング初心者で、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を使っています。

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

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

JavaScript

1<body> 2 <script type="text/javascript"> 3 $(function(){ 4 var selectNum; 5 var hand = ["ぐー","ちょき","ぱー"]; 6 var shouhai = ["勝利!","引き分けだ!","負け!"]; 7 var hanteiHaitretu = [ 8 [shouhai[1],shouhai[0],shouhai[2]], 9 [shouhai[2],shouhai[1],shouhai[0]], 10 [shouhai[0],shouhai[2],shouhai[1]]]; 11 12 //勝敗関連 13 var aKachisu; 14 var bKachisu; 15 var hikiwakeSu; 16 var aRate; 17 var bRate; 18 var aRateText = document.getElementById('aKachiRate'); 19 var bRateText = document.getElementById('bKachiRate'); 20 21 //ページ読み込み時 22 $(window).on("load",function(){ 23 if(localStorage.getItem("a")){ 24 aKachisu = localStorage.getItem("a"); 25 } else { 26 aKachisu = 0; 27 } 28 29 if(localStorage.getItem("b")){ 30 bKachisu = localStorage.getItem("b"); 31 } else { 32 bKachisu = 0; 33 } 34 35 if(localStorage.getItem("hikiwake")){ 36 hikiwakeSu = localStorage.getItem("hikiwake"); 37 } else { 38 hikiwakeSu = 0; 39 } 40 41 if((aKachisu == 0)&&(bKachisu == 0)&&(hikiwakeSu == 0)){ 42 aRateText.innerHTML = 0; 43 bRateText.innerHTML = 0; 44 } else { 45 aRate = aKachisu/(aKachisu+bKachisu+hikiwakeSu)*100; 46 bRate = bKachisu/(aKachisu+bKachisu+hikiwakeSu)*100; 47 48 aRateText.innerHTML = aRate; 49 bRateText.innerHTML = bRate; 50 } 51 }); 52 53 //勝ち負け判定 54 function hanteiFunc(n) { 55 selectNum = Math.floor(Math.random() * 3); 56 $("#aHand").html(hand[n]); 57 $("#bHand").html(hand[selectNum]); 58 $("#kekka").html(hanteiHaitretu[n][selectNum]); 59 60 if((n-selectNum == -1) || (n-selectNum == 2)) { 61 aKachisu++; 62 }else if((n-selectNum == 1) || (n-selectNum == -2)) { 63 bKachisu++; 64 } else { 65 hikiwakeSu++; 66 } 67 68 localStorage.setItem("a",aKachisu); 69 localStorage.setItem("b",bKachisu); 70 localStorage.setItem("hikiwake",hikiwakeSu) 71 72 aRate = aKachisu/(aKachisu + bKachisu + hikiwakeSu)*100; //★ここのaKachisu + bKachisu + hikiwakeSuがうまく計算されません…! 73 bRate = bKachisu/(aKachisu + bKachisu + hikiwakeSu)*100; 74 75 aRateText.innerHTML = localStorage.getItem("a"); 76 bRateText.innerHTML = localStorage.getItem("b"); 77 } 78 79 $("#gu").click(function(){ 80 hanteiFunc(0); 81 }) 82 83 $("#choki").click(function(){ 84 hanteiFunc(1); 85 }) 86 87 $("#pa").click(function(){ 88 hanteiFunc(2); 89 }) 90 }); 91 </script> 92 <div>aの勝率:<span id="aKachiRate"></span>%</div> 93 <div id="aHand"></div> 94 <div>bの勝率:<span id="bKachiRate"></span>%</div> 95 <div id="bHand"></div> 96 <p>以下から選んでclick!!</p> 97 <div id="gu">gu</div> 98 <div id="choki">choki</div> 99 <div id="pa">pa</div> 100 <div id="kekka"></div> 101 102</body> 103

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2015/08/08 10:27

otn

総合スコア84423

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

u_sa9n

2015/08/08 10:57

otnさん ありがとうございます!!!! 無事意図するように動きました!!!! 2,3時間ほど悩んでいたのが6分で解決するとは…!! ちなみに、 localStorage.getItem("a")だと文字列として取得されて、 +localStorage.getItem("a")だと数値として取得されるという認識であっていますでしょうか?? また、 >isNaN()は、浮動小数点の「非数」かどうかを判断するものです。 こちらもありがとうございます!! ググって調べてたらisNaN()で数値がどうか判定できるとあったので使ってみたのですが… http://mask.hatenadiary.com/entry/2013/12/14/231916 鵜呑みもまずいってことですかね。。。 とてもとても助かりました! 本当にありがとうございます!!
otn

2015/08/08 11:20

> isNaN()で数値がどうか判定できる 引数が文字列の場合でも先頭の方が数字なら真ですので、型の判断には使えません。 > +localStorage.getItem("a")だと数値として取得される いえ。文字列として取得して、単項演算子+でそれを数値化します。関数だと、Number()とかparseInt()とか。
u_sa9n

2015/08/09 05:30

>引数が文字列の場合でも先頭の方が数字なら真ですので、型の判断には使えません。 なるほど…!!そうなんですね!isNaN()の使い方勉強してみます! >文字列として取得して、単項演算子+でそれを数値化します。関数だと、Number()とかparseInt()とか。 そうゆう意味での「+」なのですね!また、関数使っても動きました!! とても丁寧な解説ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問