アラートが表示されない理由が分からず困っております

下記javascriptのコードのままだと☆のアラートがなぜ表示されず、★と☆の部分を入れ替えるとアラートが表示されるのかが全く分からず困っております。

詳しい方ご教示頂けないでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Typing Game</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <p id="target">click to start</p>
10  <p class="info">
11    Letter count: <span id="score">0</span>,
12    Miss count: <span id="miss">0</span>,
13    Time left: <span id="timer">0.00</span>
14  </p>
15
16  <script src="js/main.js"></script>
17</body>
18</html>

javascript
1'use strict';
2
3{
4  const words = [
5    'apple',
6    'sky',
7    'blue',
8    'middle',
9    'set',
10  ];
11  let word = words[Math.floor(Math.random() * words.length)];
12  let loc = 0;
13  let score = 0;
14  let miss = 0;
15  const timeLimit = 3 * 1000;
16  let startTime;
17
18  const target = document.getElementById('target');
19  const scoreLabel = document.getElementById('score');
20  const missLabel = document.getElementById('miss');
21  const timerLabel = document.getElementById('timer');
22
23  function updateTarget() {
24    let placeholder = '';
25    for (let i = 0; i < loc; i++) {
26      placeholder += '_';
27    }
28    target.textContent = placeholder + word.substring(loc);
29  }
30
31  function updateTimer() {
32    const timeLeft = startTime + timeLimit - Date.now();
33    timerLabel.textContent = (timeLeft / 1000).toFixed(2);
34
35/*★*/
36　if (timeLeft < 0) {
37  clearTimeout(timerId);
38  alert('Game over');
39}
40/*★*/
41
42/*☆*/  
43　const timerId = setTimeout(updateTimer, 10);
44/*☆*/    
45}
46
47  window.addEventListener('click', () => {
48    target.textContent = word;
49    startTime = Date.now();
50    updateTimer();
51
52   });
53
54  window.addEventListener('keydown', e => {
55    if (e.key === word[loc]) {
56      loc++;
57      if (loc === word.length) {
58        word = words[Math.floor(Math.random() * words.length)];
59        loc = 0;
60      }
61      updateTarget();
62      score++;
63      scoreLabel.textContent = score;
64    } else {
65      miss++;
66      missLabel.textContent = miss;
67    }
68  });
69}
70
71

y_waiwai

2020/05/19 04:35

その表示されるというアラートのメッセージを提示しよう

kei344

2020/05/19 04:41

コード中に文字列を入れるなら/**/で囲みましょう。そこがエラーになってそもそも動きません。

tanakashouzoux

2020/05/19 04:50

y_waiwaiさんアラートには「Game Over」と表示するつもりですm(__)m

tanakashouzoux

2020/05/19 04:51

kei344さん御指導ありがとうございます！質問のコードを修正させて頂きましたm(__)m

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

回答2件

ベストアンサー

Chromeなどのブラウザで確認されているのだと思うので、
ディベロッパーツールのconsoleなどでエラー内容を確認するようにしたらよいと思います。
エラーの理由を出力してくれますよ。英語ですが。

★と☆を入れ替えるとアラートが出る理由、
単純に、timerIdという変数を宣言して値を入れる前に使用しているから、じゃないですかね。

投稿2020/05/19 04:54

編集2020/05/19 04:55

kaputaros

総合スコア1844

tanakashouzoux

2020/05/19 05:02

回答ありがとうございますm(__)m timerIdという変数を宣言して値を入れる前にclearTimeoutを使用すると、その後のalertも表示されないものなのでしょうか？

kaputaros

2020/05/19 05:16

その後も、というのがよくわかりませんが、一度エラーになったら、その先には正常に進めないですよ。また、timerIdはあくまで引数の変数（箱のようなもの）なのであって、中身は代入するまでありません。 window.clearTimeout https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout こちらのマニュアルを読むと、「引数：timeoutID 解除したいタイマの ID です。 ID は setTimeout() の返値によって取得できます。」とあります。 setTimeout()でtimerIdを取得し、そのidに対してclearTimeout()を実行するようになってるんですね。

tanakashouzoux

2020/05/19 05:54

わざわざありがとうございます！エラーが出ると進まないことも知りませんでした。。。初心者にも優しく教えて下さりありがとうございますm(__)m

kaputaros

2020/05/19 06:12 編集

言語は機械を動かすための命令なので、人間が分かる言葉→機械が分かることば(０と１のみの世界)に翻訳してあげなくてはならないんです。参考までに、翻訳の仕方をまとめたサイトのURL貼っておきますね。コンパイラ言語とインタプリタ言語の違いを誰でもわかるように説明する【図解】 https://www.goethekyodai.xyz/entry/compiler-interpreter あと、ディベロッパーツールの使い方 https://www.buildinsider.net/web/chromedevtools/01 課題（かな？）がんばってください。

tanakashouzoux

2020/05/19 06:05

わざわざ温かいお言葉を、そしてアドバイスまでありがとうございます！ Javascriptを独学で勉強しておりまして、指導頂ける先輩もおらず本当に助かりますm(__)m また何かありましたら御指導頂ければ幸いですm(__)m

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

既に回答があるとおり、定義していない変数を使用しているからです。
ただ、そもそもなぜ同じスコープ内でconst timerIdしているかがわかりません。多重にsetTimeoutをしないためなら、ひとつ上のスコープでconst timerIdする必要があるのでは。（コードは特に読んでいないのですが、何か必要があってのことなのでしょうか）

js
1'use strict';
2clearTimeout(timerId);
3alert('Game over');
4const timerId = setTimeout(_=>0, 10);
5
6/* @Firefox
7ReferenceError: can't access lexical declaration `timerId' before initialization _display:38:1
8*/
9```**動くサンプル：**[https://jsfiddle.net/dxg3aof9/](https://jsfiddle.net/dxg3aof9/)
10
11---
12
13【let - JavaScript | MDN】
14[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone)
15> 変数を宣言より前で参照すると ReferenceError が発生します。