scoreの表記が出てこない(javascript)

前提・実現したいこと

ドットインストールのjavascriptを参考に三択問題を作成しています。
問題をといた後に正解数を表示したいのですが、表示されません。
どのように改善したら表示されるようになるでしょうか？

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

該当のソースコード

html
1<div class="q-answer-content">
2<section class="container-main">
3  <title class="cate-h1 mb-4">Answer</title>
4  <div class="row">
5
6      <p id="question"></p>
7      <ul id="choices">
8      </ul>
9      <div id="btn" class="disabled">Next</div>
10  </div>
11  
12  <section id="result" class="hidden">
13    <p></p>
14    <a href="">Replay?</a>
15  </section>
16</section>
17
18<%= javascript_pack_tag 'posts/answer.js' %>
19</section>
20 </div>
21

css
1.q-answer-content {
2  width: 400px;
3  margin: 140px auto;
4  border-radius: 4px;
5  padding: 16px;
6  position: relative;
7  color: white;
8  background-color: rgba(80,80,80,0.5);
9  border: 1px solid white;
10}
11
12
13#question {
14  margin-bottom: 16px;
15  font-weight: bold;
16}
17
18#choices {
19  list-style: none;
20  padding: 0;
21  margin-bottom: 16px;
22}
23
24#choices>li {
25  border: 1px solid #ccc;
26  border-radius: 4px;
27  padding: 10px;
28  margin-bottom: 10px;
29  cursor: pointer;
30}
31
32#choices>li:hover {
33  background: #b5a1a1;
34}
35
36#choices>li.correct {
37  background: #d4edda;
38  border-color: #c3e6cb;
39  color: #155724;
40  font-weight: bold;
41}
42
43#choices > li.correct::after {
44  content: ' ... correct!';
45}
46
47#choices>li.wrong {
48  background: #f8d8da;
49  border-color: #f5c6cb;
50  color: #721c24;
51  font-weight: bold;
52}
53
54#choices>li.wrong::after {
55  content: ' ... wrong!';
56}
57
58#btn, #result > a {
59  background: #3498db; //回答選択後のNextの色
60  padding: 8px;
61  border-radius: 4px;
62  cursor: pointer;
63  text-align: center;
64  color: #fff;
65  box-shadow: 0 4px 0 #2880b9;
66}
67
68#btn.disabled {
69  background: #ccc;//回答する前のNextの色
70  box-shadow: 0 4px 0 #bbb;
71  opacity: 0.7;
72}
73
74#result {
75  position: absolute;
76  width: 300px;
77  background: white;
78  padding: 30px;
79  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
80  top: 50px;
81  left: 0;
82  right: 0;
83  margin: auto;
84  border-radius: 4px;
85  text-align: center;
86  transition: 0.4s;
87}
88
89#result.hidden {
90  transform: translateY(-500px);
91}
92
93#result > p {
94  font-size: 24px;
95}
96
97#result > a {
98  display: block;
99  text-decoration: none;
100}
101

javascript
1'use strict';
2
3{
4  const question = document.getElementById('question');
5  const choices = document.getElementById('choices');
6  const btn = document.getElementById('btn');
7  const result = document.getElementById('result');
8  const scoreLabel = document.querySelector('#result > p');
9
10  const quizSet = shuffle([{
11      q: '世界で一番大きな湖は？',
12      c: ['カスピ海', 'カリブ海', '琵琶湖']
13    },
14    {
15      q: '2の8乗は？',
16      c: ['256', '64', '1024']
17    },
18    {
19      q: '次のうち、最初にリリースされた言語は？',
20      c: ['Python', 'JavaScript', 'HTML']
21    },
22  ]);
23  let currentNum = 0;
24  let isAnswered;
25  let score = 0;
26
27  function shuffle(arr) {
28    for (let i = arr.length - 1; i > 0; i--) {
29      const j = Math.floor(Math.random() * (i + 1));
30      [arr[j], arr[i]] = [arr[i], arr[j]];
31    }
32    return arr;
33  }
34
35  function checkAnswer(li) {
36    if (isAnswered) {
37      return;
38    }
39    isAnswered = true;
40
41    if (li.textContent === quizSet[currentNum].c[0]) {
42      li.classList.add('correct');
43      score++;
44    } else {
45      li.classList.add('wrong');
46    }
47
48    btn.classList.remove('disabled');
49  }
50
51  function setQuiz() {
52    isAnswered = false;
53
54    question.textContent = quizSet[currentNum].q;
55
56    while (choices.firstChild) {
57      choices.removeChild(choices.firstChild);
58    }
59
60    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
61    shuffledChoices.forEach(choice => {
62      const li = document.createElement('li');
63      li.textContent = choice;
64      li.addEventListener('click', () => {
65        checkAnswer(li);
66      });
67      choices.appendChild(li);
68    });
69
70    if (currentNum === quizSet.length - 1) {
71      btn.textContent = 'Show Score';
72    }
73  }
74
75  setQuiz();
76
77  btn.addEventListener('click', () => {
78    if (btn.classList.contains('disabled')) {
79      return;
80    }
81    btn.classList.add('disabled');
82
83    if (currentNum === quizSet.length - 1) {
84      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
85      result.classList.remove('hidden');
86    } else {
87      currentNum++;
88      setQuiz();
89    }
90  });
91}
92

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

javascriptに関してはドットインストールと同じコードを記入しています。（background-colorだけ変えてます)

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

回答1件

ベストアンサー

示されてるソースより最小限である

html
1<html>
2<head>
3<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
4
5<style type="text/css">
6.q-answer-content {
7  width: 400px;
8  margin: 140px auto;
9  border-radius: 4px;
10  padding: 16px;
11  position: relative;
12  color: white;
13  background-color: rgba(80,80,80,0.5);
14  border: 1px solid white;
15}
16
17
18#question {
19  margin-bottom: 16px;
20  font-weight: bold;
21}
22
23#choices {
24  list-style: none;
25  padding: 0;
26  margin-bottom: 16px;
27}
28
29#choices>li {
30  border: 1px solid #ccc;
31  border-radius: 4px;
32  padding: 10px;
33  margin-bottom: 10px;
34  cursor: pointer;
35}
36
37#choices>li:hover {
38  background: #b5a1a1;
39}
40
41#choices>li.correct {
42  background: #d4edda;
43  border-color: #c3e6cb;
44  color: #155724;
45  font-weight: bold;
46}
47
48#choices > li.correct::after {
49  content: ' ... correct!';
50}
51
52#choices>li.wrong {
53  background: #f8d8da;
54  border-color: #f5c6cb;
55  color: #721c24;
56  font-weight: bold;
57}
58
59#choices>li.wrong::after {
60  content: ' ... wrong!';
61}
62
63#btn, #result > a {
64  background: #3498db; //回答選択後のNextの色
65  padding: 8px;
66  border-radius: 4px;
67  cursor: pointer;
68  text-align: center;
69  color: #fff;
70  box-shadow: 0 4px 0 #2880b9;
71}
72
73#btn.disabled {
74  background: #ccc;//回答する前のNextの色
75  box-shadow: 0 4px 0 #bbb;
76  opacity: 0.7;
77}
78
79#result {
80  position: absolute;
81  width: 300px;
82  background: white;
83  padding: 30px;
84  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
85  top: 50px;
86  left: 0;
87  right: 0;
88  margin: auto;
89  border-radius: 4px;
90  text-align: center;
91  transition: 0.4s;
92}
93
94#result.hidden {
95  transform: translateY(-500px);
96}
97
98#result > p {
99  font-size: 24px;
100}
101
102#result > a {
103  display: block;
104  text-decoration: none;
105}
106</style>
107</head>
108<body>
109<div class="q-answer-content">
110  <section class="container-main">
111    <title class="cate-h1 mb-4">Answer</title>
112    <div class="row">
113  
114        <p id="question"></p>
115        <ul id="choices">
116        </ul>
117        <div id="btn" class="disabled">Next</div>
118    </div>
119  
120    <section id="result">
121      <p></p>
122      <a href="">Replay?</a>
123    </section>
124  </section>
125</div>
126<script>
127  const scoreLabel = document.querySelector('#result > p');
128  scoreLabel.textContent = "hoge";
129</script>
130</body>
131</html>

でやったらたしかに出ないけど、単にフォントカラーが白だから背景色に混ざってるだけっぽいです。

css
1#result > p {
2  font-size: 24px;
3  color: #000000;
4}

にしてみましょう。

投稿2020/05/25 08:47

rururu3

総合スコア5545

tetsuya7724

2020/05/25 09:45

できました！ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

scoreの表記が出てこない(javascript)

前提・実現したいこと

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

該当のソースコード

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

関連した質問