今回作ったアプリは、1つ微妙な点があります。
それは、if文の条件式です。
実際に見てみると、条件式の比較が==になっていると思います。
この==は、比較演算子と言って、右と左の値が等しいかどうかをチェックします。
inputNumber.value == answerNumber
この場合は、入力された値と用意された変数を比較しているのですが、文字なのか数値なのかは比較していません。
どういうことかと言いますと、プログラムには文字列の数字と数値の数字があるからです。
変数の型を確認する
ボタンクリックの処理の中に以下のコードを追記してください。
console.log("inputNumber.value", typeof inputNumber.value);
console.log("answerNumber", typeof answerNumber);
この、typeofは、指定した値の型を出力してくれます。
型にはstring、number、booleanなどの型があります。
この様なコードになっていれば問題ないです。
btn.addEventListener("click", function () {
console.log("inputNumber.value", typeof inputNumber.value);
console.log("answerNumber", typeof answerNumber);
if (inputNumber.value == answerNumber) {
alert("正解");
} else {
alert("はずれ");
}
});
では、ブラウザで動かしてみましょう。
数字を入力する前に、F12 キーを押してデベロッパーツールを開きます。
そして、入力エリアで数字を入力して確認ボタンをクリックすると、今まで通りアラートが出ると思いますが、デベロッパーツールの Console タブを開くと、下記の画像の様にstringとnumberが表示されていると思います。
これで、入力した値は stringで、ランダムに生成した値は numberと言うことが分かりました。
型は違うのに正しいと判断されるのは==特徴です。
ですが、実際に開発を進めていく上で==で比較すると、予期しない動きをする可能性があるため危険です。
なので、型もしっかりと比較して判断してくれる===で比較した方が安全で良いです。
if文を安全に書いてみる
それでは、if 文を下記の安全な書き方に書き直しましょう。
if (Number(inputNumber.value) === answerNumber) {
ここで、inputNumber.value をNumber()で囲っていると思いますが、これは文字列を数値に変換しています。
他の型に変換する事をキャストと言います。
ブラウザで確認してみると、ちゃんと動いていることが分かると思います。
この様に文字列の数字を数値に変換することで、型の違う値でもしっかり比較してくれます。