if文内に関数を書いていないのに関数が実行されます。

html
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4   <meta charset="UTF-8">
5   <title>Quiz</title>
6   <link rel="stylesheet" href="css/styles.css">
7 </head>
8
9
10 <body>
11
12    <div id="box">
13      <p id="q">AAA</p>
14
15       <section id="choice">
16         <li id="a">Q</li>
17         <li id="b">Q</li>
18         <li id="c">Q</li>
19       </section>
20     
21     <div id="an">
22       <p id="btn">Next</p>
23     </div>
24
25    </div>
26
27  <script type="text/javascript" src="script.js"></script>
28 </body>

js
1// 変数化
2var q = document.getElementById("q")    //問題と選択肢変更変更のためのもの
3var a = document.getElementById("a")
4var b = document.getElementById("b")
5var c = document.getElementById("c")
6
7
8//　同じ問題が出題されないようにするもの。
9var q0 = 1;
10var q1 = 1;
11var q2 = 1;
12var q3 = 1;
13var q4 = 1;
14var q5 = 1;
15
16
17 function qq0(){                  
18  if(q0 === 0){ 　　　　　　　　　//もし出題されるとq0 q1 q2...q5は0になるようにしている
19　return Q();　　　　　　　　　　
20}
21};
22
23 function qq1(){
24  if(q1 === 0){
25  return Q();
26}
27};
28
29 function qq2(){
30  if(q2 === 0){
31  return Q();
32}
33};
34
35 function qq3(){
36  if(q3 === 0){
37  return Q();
38}
39};
40
41 function qq4(){
42  if(q4 === 0){
43  return Q();
44}
45};
46
47 function qq5(){
48  if(q5 === 0){
49  return Q();
50}
51};
52
53
54// 問題生成
55
56function Q() {
57  
58  var M = Math.floor(Math.random() * 10);//ランダムに問題を出題するためのもの
59  
60  if(M === 0){
61    qq0();　//一度でた問題は出ないようにここで判断する
62    q.textContent = "宇宙の銀河の数は？";
63    a.textContent = "2000個"
64    b.textContent = "2億個"
65    c.textContent = "2兆個"
66    q0 = 0;　//二度出題しようとしたらこれが上のif文に引っかかるため不可能なはずでは？
67    console.log(q0 + "a");　//問題が正しく出題されているか確認するためのconsole
68    i++;
69    }else if(M === 1){　//以下同じようなものが続く
70    qq1();
71    q.textContent = "「スパルタ」の由来は？"
72    a.textContent = "古代ギリシャの都市名"
73    b.textContent = "現代の王様"
74    c.textContent = "古代生物の名前"
75    q1 = 0;
76    console.log(q1 + "b");
77    i++;
78  }else if(M === 2){
79    qq2();
80    q.textContent = "日本一きれいな星空をみれる都道府県は？"
81    a.textContent = "北海道"
82    b.textContent = "長野県"
83    c.textContent = "佐賀県"
84    q2 = 0;
85    console.log(q2 + "c");
86    i++;
87  }else if(M === 3){
88    qq3();
89    q.textContent = "観測史上もっとも標高が高い山の高さは？" 
90    a.textContent = "3776.4m"
91    b.textContent = "5万5893m"
92    c.textContent = "2万1230m"
93    q3 = 0;
94    console.log(q3 + "d");
95    i++;
96  }else if(M === 4){
97    qq4();
98    q.textContent = "世界で２番目に競技人口が多いスポーツは？"
99    a.textContent = "野球"
100    b.textContent = "クリケット"
101    c.textContent = "ボクシング"
102    q4 = 0;
103    console.log(q4 + "e");
104    i++;
105  }else if(M === 5){
106    qq5();
107    q.textContent = "ビルゲイツが創業した会社の名前は？"
108    a.textContent = "Soft Bank"
109    b.textContent = "Micro soft"
110    c.textContent = "Apple"
111    q5 = 0;
112    console.log(q5 + "f");
113    i++;
114  }else{
115   Q();　//上のどれにも当てはまらない場合にもう一度
116  };
117  
118};
119
120
121
122var btn = document.getElementById("btn")　
123
124var k = 0;
125
126btn.addEventListener('click', () => {　　//ボタンを押すと問題が出る
127    Q(); 　　
128    
129    k++;　
130    console.log(k);　//正しくクリックされているのかの確認
131    if(i === 3){
132  btn.textContent = "Score!";
133};
134});
135

希望している動き

同じ問題は出ないように１問ずつ出題していきたいです。

問題点

js上にこのように書くことによって同じ問題が出ようとするとqq0()などのif文が作動し別の問題に移動するまと思っていたのですが、そうなりません。

例えばQ()を発動するボタンを４回押したときにコンソール上に

0b　　　　　　
1
0c
2
0d
3
0f
0d
4

と表示されます。

このとき3回目までは望み通りの動きなのですが４回目になぜか２回連続で問題が出題されます。

0fと表示されているということはM === 5のときのif文が作動しているのですが、その中にはQ();を作動させるような記述はありません。qq5();を除いては...

qq5();はq5 = 0;が定義される前には発動されないはずです。

なのにコンソールでは0fの直後に0dがきています。

しかも0dが出たということは一度出た問題が出題されています。

間違いを指摘していただけると幸いです。

試したこと

return Q(); ではなく　

Q();
return; としました。　結果は同じでした。

行動規範の内容に同意します

回答2件

僕の環境でも、問題なく動作しました！

ただ、気になる点は、
-変数iが定義されていない
-すべての問題が出題され終わると関数Q() が無限に実行される
-";" のつけ忘れがある

あと、連続2回出る問題も、関数Q() if文を

JavaScript
1  if(M === 0　&& q0 === 1){
2    qq0();　//一度でた問題は出ないようにここで判断する
3    q.textContent = "宇宙の銀河の数は？";
4    a.textContent = "2000個"
5    b.textContent = "2億個"
6    c.textContent = "2兆個"
7    q0 = 0;　//二度出題しようとしたらこれが上のif文に引っかかるため不可能なはずでは？
8    console.log(q0 + "a");　//問題が正しく出題されているか確認するためのconsole
9    i++;
10    }

と、　if文の中に　"&& q0 === 1" を付け加えたら直りました。

投稿2019/12/08 09:59

退会済みユーザー

総合スコア0

dda

2019/12/09 05:09

確かにそのようにすればよかったですね・・・。勉強になりました！ありがとうございます！

行動規範の内容に同意します

// 一度でた問題は出ないようにここで判断する と書かれた部分の関数がQ()を実行したとしても、そのreturn結果を全く使わず処理を止めなければ、それ以降の処理は実行されます。

js
1function qq5(){
2  if(q5 === 0){
3    return Q(); // Q()は何も返していない
4  }
5  return true;
6}

js
1if ( !qq5() ) return; // qq5()でQ()が実行されたら

投稿2019/12/07 19:54

kei344

総合スコア69596

dda

2019/12/09 05:26

回答ありがとうございます。 function qq5(){ if(q5 === 0){ return Q(); // Q()は何も返していない } return true; } で処理が止まるということは理解したのですが if ( !qq5() ) return; // qq5()でQ()が実行されたらとかかれた部分は何のためにあるのでしょうか？調べてみると！関数　は「関数がfalseのとき」という意味と記載されていたのですがいつ関数がfalseとされたのでしょうか？

kei344

2019/12/09 07:46

> 何のために return結果を使って処理を止めるため。 > いつ関数がfalse Q()は何も返さないので、undefined が代わりに返ります。【return - JavaScript | MDN】 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/return

行動規範の内容に同意します

あなたの回答