for文とif文を組み合わせたクイズアプリを作っています。

Question

前提・実現したいこと

JavaScriptの課題でfor文とif文を組み合わせたクイズアプリを製作しています。

<1>alertで１から５までの数値を当てるよう指示する（答えは2）
<2>okを押すとpromptで1から5までのどれかを入力するよう出てくる
<3>外れると、間違っているので再度答えを入力するようにというpromptが出てくる
<4>当たればalertで「おめでとう！」などのメッセージが現れゲームが終了する

という流れを作りたいです。

発生している問題・エラーメッセージ

for文についてどうしても理解が追いつかないのですが、for文は繰り返す回数が決まっている時に使うものですよね？この課題の場合確かに選択肢は5つしかないですが、2が当たるまでは無限に続くはずですよね？それをどうやってfor文で表せばいいのかさっぱりわかりません。
またfor/for in/for ofのどれを使うべきなのかも不明で、なんとなくforではないのかな？と思っています・・・

下に自力で書いてみたコードがありますが全然違う気がしてるので都度指摘して頂けると助かります；

該当のソースコード

// alertで'You got 5 guesses. Guess 1 to 5'と言うメッセージを表示させ、１から５までの数値を当てるよう指示する。
        alert ('You got 5 guesses. Guess 1 to 5');

// 答えの数値を2で用意
        const correctAnswer = 2; // こういうことでしょうか？そしていつ使う？？

// promptで'What do you guess?'と言うメッセージとともに、記入欄を表示させる
        prompt('What do you guess?');

// forループで１から５までの数値で、答えの2が当たるまで推測を促すpromptを表示させる。
// ヒント１：if文とも組み合わせて、推測が当たった場合はalertで'Good job! See what happens next :)'を表示。当たったらゲーム終了にする。
// ヒント２：外れたらpromptで'Ops! Maybe, another try?'のメッセージとともに記入欄を表示。
        let numbers = [1, 2, 3, 4, 5]

        for (/*ここに何を書けばいいのかわからない*/) {
            if (numbers === 2) {
                alert ('Good job! See what happens next :)');
                break;
            } else {
                prompt ('Ops! Maybe, another try?');
            }
        }

試したこと

2が出るまでは無限に続くはず！と思いfor(;;)などと書いて見ましたが永遠に外れた場合のpromptが繰り返されるだけでした・・・

補足情報（FW/ツールのバージョンなど）

ATOMを使用しています。

Answer 1

2が出るまでは無限に続くはず！と思いfor(;;)などと書いて見ましたが永遠に外れた場合のpromptが繰り返されるだけでした・・・

かなり惜しい！
ここはfor文の中に書き込むルールを押さえれば完璧に書けそう

for文は3つのルールを;で区切って配置するループ文
よくある10回のループを回す場合の書き方はこうfor (int i = 0; i < 10; i++) {

• 初期設定: (例)int i = 0 <- iという変数を宣言する
• 継続条件: (例)i < 10 <- trueに評価され続ける限り実行
• 1ループ毎の処理: (例)i++ <- for文の最後に来るたびにこれが実行される

今回のケースは無限に続くはずなので、2つ目にはtrueという固定値を設定する。
これで無限ループの完成。
今度は無限ループの抜け方だけどbreakという文がJSには用意されてて、コレを実行すれば抜けられる。

for (; true; ) {
  if (numbers === 2) {
    alert ('Good job! See what happens next :)');
    break;
  } else {
    prompt ('Ops! Maybe, another try?');
  }
}

breakは質問文の時点で既に使ってるね、Good！

---

じゃあダメな所を見ていこう。
if (numbers === 2)が今回のダメな所。

ループの上を見ればlet numbers = [1, 2, 3, 4, 5]とnumbersを宣言しているね。
これってそもそも配列だからnumbers === 2を比較してもfalseになる。
そしてelseの方に入るわけだ。

でもprompt ('Ops! Maybe, another try?')は実行されるとどうなるの？
MDNのサイトでpromptに関して調べると…

result = window.prompt( text, value );
result は、ユーザによって入力されたテキスト、または、null 値を含む文字列です。

この質問文を見る限り、numbersの[1, 2, 3, 4, 5]は一生変化しないね。
そして次のループでも変化しない[1, 2, 3, 4, 5] === 2を比較してelseに入るってわけ。

じゃあ、どうすればいいか？
例えばlet number = prompt('What do you guess?');みたいな書き方で入力値を受け取り、
numberを確認すればいい。

でもpromptの戻り値は必ず文字列になるから、``number === 2だとfalseになるので、 if (parseInt(number) === 2)`みたいにすればいいんじゃない？

Comments

[mo__fumi]

わああ〜〜優しく丁寧に書いてくださってありがとうございます；；
for文について勉強になりました！(; true;)という書き方もあるんですね。
parseInt()というもの初めて見ました・・・文字列を整数に変換してくれるんですね。今の自分に上手く扱える自信がないのですが覚えておきます＞＜
実は他のサイトでもアドバイスいただいていまして、miyabi-sunさんからいただいたアドバイスとの合作で正常に動くようになりましたので上の自己解決方法にてコードupさせていただきますね！本当にありがとうございました＾＾

Answer 2

<2>でpromptで入力を促していますね？
では、そこで入力された値はどうなりましたか？
prompt の使い方をまず確認してみてください。

Comments

[mo__fumi]

値を入力しても何も起きず、prompt ('Ops! Maybe, another try?');が延々と繰り返されるだけです・・・この答え方で合ってるでしょうか？？ prompt('What do you guess?');の下にconsole.log(this.prompt)と打って見ましたがconsoleには何も表示されず白紙でした。

[Marbow]

prompt は戻り値を持ちます。
var result = prompt("Question");
とすれば、resultに入力された値が入ります。
prompt で入力された値を得ることが出来たら、次はどうすればいいのか考えましょう。

[mo__fumi]

ご指摘いただいたpromptの部分を
　　　　let result = prompt('What do you guess?');
　　　　console.log(result);
に変更し、if文の部分を
if (result === 2) {
alert ('Good job! See what happens next :)');
break;
} else {
prompt ('Ops! Maybe, another try?');
}
として見ました！おっしゃりたかったこととあってますでしょうか？？

[Marbow]

おはようございます。
返事が来るまでにだいぶ時間がかかったようなのでいろいろ試したのでしょうか？
自分も大したことはできないのですが、少し偉そうな書き方をすることをご了承ください。
もし、いろいろ試したのであれば、最初に正解すれば正しくメッセージを出力して終了するが、一度間違えてから正解しようとしてもうまくいかないことに気付いているはずです。
指摘されたところを変更したら動いた、ではなく、なぜ指摘されたところを変更したら動くようになったのかを考えるよう心がけてください。

出された料理を食べているだけではいけません。自分で料理ができるようにならないといつまでたっても自立できませんよ。

[mo__fumi]

おはようございます！はい、おっしゃっていただいた部分はすぐ直せたのでそこからどうやって完成に導けるかググったりして考えたのですが・・・全然進まずでした。
そしてメッセージですが永遠にprompt ('Ops! Maybe, another try?');が出力されるのみで、入力された数字が正解か不正解かも判断できていないコードになっているようです；

こういう場所に質問させていただくと厳しい意見もいただくであろうこと重々承知して書いております。しかし１時間考えて「わかんないわ〜」と書いたわけではなく２日経っても３日経ってもこれ以上自力でコードを書き進められなかったという背景でして・・・いつもならメンターさんに聞くのですが彼女がホリデーのためこちらで質問させていただきましたm(_ _)m

Answer 3

        alert ('You got 5 guesses. Guess 1 to 5');

        let number = prompt('What do you guess?');
        console.log(number);

        let correctAnswer = '2';
        let wrongAnswers = ['1', '3', '4', '5'];

        for (; true;) {
            if (number === correctAnswer) {
                alert ('Good job! See what happens next :)');
                break;
            } else if (wrongAnswers.indexOf(number) >= 0) {
                number = prompt('Ops! Maybe, another try?');
            } else {
                number = prompt('Please guess 1 to 5!');
            }
        }