タイピングゲームでどうして単語が更新されないのかがわかりません

タイピングゲームでタイプし終えたら単語が新しい単語に更新されるようにしたいのですが、私の書き方では更新されません

下記コードJavascriptの★の部分が
「word = words[Math.floor(Math.random()*words.length)]」
だと上手く行くのですが、どうして
「target.textContent = words[Math.floor(Math.random()*words.length)]」
だと上手く更新されないのかが全く分かりません

詳しい方御指導頂けないでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Typing Game</title>
7  <link rel="stylesheet" href="css/styles.css">
8</head>
9<body>
10  
11
12  
13  <p id="target">word</p>
14  <p class="info">
15    Letter count:  <span id="score"></span>
16    Miss count:  <span id="miss"></span>
17  </p>
18
19  
20  <script src="js/main.js"></script>
21</body>
22</html>

Javascript
1'use strict';
2
3{
4  const words=[
5    'apple',
6    'sky',
7    'blue',
8    'middle',
9    'set'
10]
11
12  
13//wordに配列wordsの乱数番目の要素を代入
14  let word = words[Math.floor(Math.random() * words.length)];
15
16
17  let loc = 0;
18  let score = 0;
19  let miss = 0;
20
21  const target = document.getElementById('target');
22  const scoreLabel = document.getElementById('score');
23  const missLabel = document.getElementById('miss');
24
25  target.textContent = word;
26
27  function updateTarget() {
28    let placeholder = '';
29    for (let i = 0; i < loc; i++) {
30      placeholder += '_';
31    }
32    target.textContent = placeholder + word.substring(loc);
33  }
34
35  window.addEventListener('keydown', e => {
36    if (e.key === word[loc]) {
37      loc++;
38    
39//正しく押したキーの数が、選択した単語の語数と等しくなったら新しい単語を表示する
40      if (loc === word.length) {
41★        target.textContent = words[Math.floor(Math.random()*words.length)]
42        
43//
44        loc = 0;
45      }
46
47      updateTarget();
48      score++;
49      scoreLabel.textContent = score;
50
51    } else {
52      miss++;
53      missLabel.textContent = miss;
54    }
55  });
56}
57

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

回答1件

ベストアンサー

そのあとに呼ばれるupdateTarget()内でtarget.textContentがword(前回の単語)の内容で上書きされていますよ。
また、次の単語表示の問題だけではなく
キー入力が単語と一致しているかの判定や、一致している文字を_に置換した文字列の作成もwordを元に実行されるため、問題文の単語はtarget.textContentではなくwordに格納しておく必要があります。

投稿2020/05/19 02:07

編集2020/05/19 02:41

SHOMI

総合スコア4079

tanakashouzoux

2020/05/19 02:18

わざわざご指導ありがとうございますm(__)m なるほどそういうことだったんですね！ということは ★ target.textContent = words[Math.floor(Math.random()*words.length)] で一旦words配列の要素がランダムにtarget.textContentに入るが、その後すぐにupdateTarget関数が実行され、関数内の target.textContent = placeholder + word.substring(loc); によりtarget.textContent に placeholder + word.substring(loc);が代入され、placeholder + word.substring(loc)が表示されるということで合ってますでしょうか？????