はじめてみよう。プログラミング！JavaScript！ - 数当てゲーム(トラブルシューティング)
まずエラーの種類として挙げられているのが、
エラーの種類
文法エラー: プログラムが全く動かなかったり、途中で止まったりするような記述エラーで、通常はエラーメッセージが出力されます。正しいツールに慣れて、エラーメッセージの内容がわかるのなら、さほど無理なく修正が可能です。
論理のエラー: 書き方は正しくても、コードが意図した通りに動ないエラーです。つまりプログラムは動くのですが、間違った結果を返します。たいていの場合に、問題となる箇所に直接のエラーメッセージが出ることがないため、文法エラーよりも直すのが難しいことが多いです。
この2つエラーについて試しながらみていきます。
このサイトにあるサンプルファイルをダウンロードして実行してみます。
ダウンロードしたファイルを開いて試しにゲームをしてみます。数字を入れて、ボタンを押します。押しても何も変化がありません。そこでFirefoxの開発者メニューのコンソールを表示してみます。
すると、コンソールには赤い文字でエラーが出ています。そこの青い文字
file:///Users/ns/Desktop/error.html:85
にカーソルを合わせ押すとゲームを作っているファイルの間違っている場所がハイライトされて表示されます。便利ですね。そして[詳細]と書かれている部分を押すとエラーの意味が表示されるようになっています。
guessSubmit.addeventListener('click', checkGuess);
というのがハイライトされています。どこかが違うよ！と教えてくれています。まず最初にすることはスペルミスをしていないかな？ということから始めましょう。そうすると、
addeventListener → addEventListener
であることに気づくことと思います。直して実行してみます。
と出て次に進めません。
前と同じように開発者メニューのコンソールを開いてみると、
Uncaught TypeError: lowOrHi is null
と出てきました。"null"とは"(何も)ない"見つからないということです。 "lowOrHi"は変数宣言していますが、うまく使えてないようです。変数宣言を見てみましょう。
const lowOrHi = document.querySelector('lowOrHi');
となっています。"querySelector"であることに注目します。
'lowOrHi'
となっています。"querySelector"であれば、'.lowOrHi'でないといけません。一番前に"."が必要ですね。修正して実行します。
これでうまく実行できるようになりました。でも挙動がへんです。何回やっても"1"が答えとなります。ランダムな数字を答えにするコードにしているはずですので何か問題があるようです。
ランダムな数字を作っているのは、
let randomNumber = Math.floor(Math.random()) + 1;
です。
console.log(randomNumber)
を試しに入れて"randomNumber"の値を出力してみると、何度やても"1"が出ます。やはりここがうまくいっていないことがわかりました。
Math.random()はというと、
0 以上 1 未満の疑似ランダムな浮動小数点による小数
となっています。
Math.floorはというと、
引数として与えた数以下の最大の整数を返す
ということなので少数を整数に変換すると"0"になりそれに"1"を足すので"1"が出力されるということみたいです。
欲しいには1から100までの整数が欲しいので
Math.random()*100
としてやれば良さそうです。
エラーを怖がず、エラーメッセージを読みながら原因を見つけてどんどん書いていきましょう！
この記事が気に入ったらサポートをしてみませんか？