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

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

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

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

jQuery

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

Q&A

解決済

3回答

13341閲覧

なぜNaNになるのかわからない

SatoshiAizawa

総合スコア46

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/03/03 05:48

以下のコードについて、変数win_perがなぜNaNになるのかわかりません

lang

1$(function(){ 2 var myHand = $('.show_player_hand'); 3 var proHand = $('.show_program_hand'); 4 var result = $('.result'); 5 6 var win_count = 0; 7 var lose_count = 0; 8 var quits_count = 0; 9 var win_per = win_count / (win_count + lose_count) * 100; 10 var hands = ['グー', 'チョキ', 'パー']; 11 12 $(".janken").click(function(){ 13 if(!$('input[type="radio"][name="janken"]:checked').val()){ 14 alert('手を組んでください'); 15 }else{ 16 var h1 = $(':radio[name="janken"]:checked').val()*1; 17 var h2 = Math.floor(Math.random() * 3); 18 myHand.text(hands[h1]); 19 proHand.text(hands[h2]); 20 console.log(win_count / (win_count + lose_count) * 100); 21 console.log(win_per); 22 if((win_count + lose_count) !== 0){ 23 $('.win_per').text(win_per); 24 } 25 if((h1===0 && h2===1) || (h1===1 && h2===2) || (h1===2 && h2===1)){ 26 result.text('勝ち'); 27 win_count++; 28 $('.win_count').text(win_count); 29 }else if((h1===0 && h2===2) || (h1===1 && h2===0) || (h1===2 && h2===0)){ 30 result.text('負け'); 31 lose_count++; 32 $('.lose_count').text(lose_count); 33 }else{ 34 result.text('あいこ'); 35 quits_count++; 36 $('.quits_count').text(quits_count); 37 } 38 } 39 }); 40});

lang

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 6 <script src="janken.js"></script> 7 </head> 8 <body> 9 <p>じゃんけん・・・</p> 10 <input type="radio" name="janken" value="0"><label>グー</label> 11 <input type="radio" name="janken" value="1"><label>チョキ</label> 12 <input type="radio" name="janken" value="2"><label>パー</label> 13 <br> 14 <input type="button" value="ぽん!" class="janken" id="button"> 15 <br> 16 あなたの手:<span class="show_player_hand"></span> 17 相手の手:<span class="show_program_hand"></span> 18 19 <p>勝ち:<span class="win_count">0</span></p> 20 <p>負け:<span class="lose_count">0</span></p> 21 <p>あいこ:<span class="quits_count">0</span></p> 22 <h3>結果</h3> 23 勝率:<span class="win_per">0</span> % 24 <div class="result"></div> 25 </body> 26</html>

真ん中あたりのconsole.logではwin_perは常にNaNとなり、右辺をそのままコピペしたwin_count / (win_count + lose_count) * 100では思った通りの結果が出てきます。なぜなのか教えてください。

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

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

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

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

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

guest

回答3

0

ベストアンサー

javascript

1var win_per = win_count / (win_count + lose_count) * 100;

0/(0+0)*100を計算すると、
0/0100
NaN
100
NaN
となります。
0除算が原因ですね。

NaNで初期化してからwin_perを更新してないですよね?
エクセルみたいに自動再計算はされないので、自分で計算した結果を必要なときに代入してください。

投稿2017/03/03 05:55

intelf___

総合スコア868

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

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

SatoshiAizawa

2017/03/03 06:00

そういうことではなく、win_per内の変数のwin_countやlose_countがインクリメントされた後に右辺のwin_count / (win_count + lose_count) * 100は正しく計算されるのにwin_perはずっとNaNのままになってしまうということです。
intelf___

2017/03/03 06:02

win_per = win_count / (win_count + lose_count) * 100; のように更新しないとwin_perは初期値のまま変化しません。
intelf___

2017/03/03 06:10

var n = 0; var s = "あ" + n; while(n < 100){ console.log(s);// [あ0あ0あ0あ0...] console.log("あ" + n); // [あ0あ1あ2あ3...] n++; } こうなるのはわかりますか? sは[あ1、あ2]のように更新されるわけではありません。=で代入してからsの値を一度も更新していないからです。 sは更新されず(計算されない)、"あ"+nは更新される(正しく計算される)というのは不思議な話ではないでしょう。
SatoshiAizawa

2017/03/03 06:15

勘違いしていました。ありがとうございます。
intelf___

2017/03/03 06:17

よくあることです。気にせず頑張ってください。
guest

0

var win_count = 0; var lose_count = 0; var quits_count = 0;

この状態で、
var win_per = win_count / (win_count + lose_count) * 100;
を計算してみると

win_per = 0 / (0+0) * 100

となって、0を0で割った結果、値が不定(NaN)になります。

投稿2017/03/03 06:01

coco_bauer

総合スコア6915

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

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

0

変数の初期化のタイミングがおかしいためです。
最初に $(".janken").click()が動いたときにはwin_count / (win_count + lose_count) * 100もNaNになるはずです。
これは、最初はwin_countもlose_countも0(ゼロ)の為、win_count / (win_count + lose_count) * 100に代入すると

0 / (0 + 0) * 100

となり、つまり数学で許可されていない「ゼロで割る」計算を行っている事になります。
この為、結果はNaN(値なし)と評価されるわけです。

更にwin_perは、じゃんけんの後も常に値が更新されるわけではなく、 $(".janken").click()の外で初期化された値をそのままずっと使っています。
ですので、win_perは常にNaNのままです。

win_perを正しく出すのであれば、 $(".janken").click()の中でwin_perを計算してください。

投稿2017/03/03 06:00

kunai

総合スコア5405

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問