JSがうまくいかない

質問

クリックするたびにポイントが１０加算されるようにしたかったのですが、なぜかクリックするとNANになってしまいます。

codepen上ではうまく再現できていないですが、ソースを張っておきました。

https://codepen.io/anon/pen/oWbvEe?editors=0001

またインスペクタで確認してNanだったのですが、codepenはインスペクタのようにソースを見る機能はないのですか？

回答No.1

bya00417 · ベストアンサー

var point = point + 10;
じゃなくて
point = point + 10;
じゃないですか。
var を付けると新たなローカル変数を宣言してる訳で、中身が定義されていない変数 (undefined) と 10 と言う数字を足そうとしたため、計算結果が NaN になっています。
本来はグローバル変数として定義した point に加算したいのでしょうから、関数内では var を付けずにグローバル変数をそのまま使う形が正しいでしょう。

あと
<div class="game">
じゃなくて
<div id="game">
じゃないですか。

お礼

ありがとうございます。
すでに定義してある変数の中身だけ変更したい場合は再宣言ではなく再代入でないとうまくいかないのですね。

ローカル変数は完全に別の変数になるので、var point = point + 10;がローカルだとまだ未定義の変数に10を足そうとするのでundefined+10になりその結果は10ではなくNANなのですね？

補足

＞＞＞
NaN（Not a Number、非数、ナン）は、コンピュータにおいて、主に浮動小数点演算の結果として、不正なオペランドを与えられたために生じた結果を表す値またはシンボルである。

10ではなくNANになる理由は上記で消化？
つまりundefinedという数値でない不正な値を計算に入れたので、不正な値があった時に出るNaNが出た、つまりこれは不正な結果ですよという事を表記しているという事なんですね。

何度も大変恐縮ですがもしよろしければ下記の問題も拝見いただければ幸いです。
https://okwave.jp/qa/q9319354.html