機能の追加をしよう(応用)

これで、しっかりと実装できたと思いきや、まだまだやることはあります！

今の状態ですと、input には、「A」などの数字以外も入力ができてしまいます。

なので、下記要件を追加します。

• 数字以外が入力された時は「半角数字で入力してください」とアラートを表示する

追加機能を実装する

ボタンとクリックしたら、正解かどうかを判定する前に下記コードを記載して、入力された値が数値かどうかを判定しましょう。

if (isNaN(Number(inputNumber.value))) {
  alert("半角数字で入力してください");
  return;
}

isNaN 関数は、引数が NaN かどうかを判定します。

そして、Number 関数で文字列キャストした場合は NaN になります。

なのでこの if 文は、半角数値以外が入力された時はアラートを表示するコードになります。

そして、alert の直後に return を書くことで、それ以降の処理は実行されません。

これで文字以外が入力されても、数値だけを入力して欲しい事をユーザーに伝えることができる様になりました。

これで余計なクレームは防げますね！！