キーボードイベントで、次の文字を対象にしたい！

前提・実現したいこと

キーボードを正しく打ったら次の文字へ対象を変更

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

currentKeyIdを増やしているのに、CurrentKeyの変数が更新されない




/問題の箇所のJavaScript/

const word = document.createElement('p');
word.classList.add('word');
word.textContent = words[Math.floor(Math.random() * words.length)];
playing_screen.appendChild(word);
let currentKeyId = 0;
let currentKey = word.textContent.charAt(currentKeyId);


document.addEventListener('keydown',(event) => {
  if (event.key === currentKey) {
    currentKeyId++;
    console.log(currentKeyId)
  }
});


/HTML/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
  <title>タイピング</title>
</head>
<body>
  <main>
    <div class="first-screen" id="first-screen">
      <h1 id="main-title">Welcome to typing game</h1>
      <div class="start-btn" id="start-btn">????START????</div>
    </div>

  </main>
  
  <script src="main.js"></script>
</body>
</html>



/CSS/
main {
  text-align: center;
  width: 800px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px black solid;
  background: #ccc;
}

main .timer {
  font-size: 40px;
}

main .word {
  font-size: 80px;
  margin: 0;
}

main .first-screen {
  margin-top: 100px;
}

main .first-screen h1 {
  font-family: 'Bangers', cursive;
  color: #e61e1e;
  font-size: 80px;
}

main .first-screen .start-btn {
  display: inline-block;
  font-size: 50px;
  border-radius: 50%;
  padding: 20px;
  font-weight: 500;
  box-shadow: 0 10px 5px;
  background: #ece509;
  cursor: pointer;
  user-select: none;
}

main .first-screen .start-btn:hover {
  background: #dcd618;
}

main .first-screen .start-btn:active {
  margin-top: 5px;
  box-shadow: 0 5px 5px;
}



/JavaScript/
'use strict';
function countUp() {
  const d = Date.now() - startTime;
  const remaing_t = new Date(limit_ms - d);
  const m = String(remaing_t.getMinutes()).padStart(2, '0');
  const s = String(remaing_t.getSeconds()).padStart(2, '0');
  const ms = String(Math.floor(remaing_t.getMilliseconds() / 10)).padStart(2, '0');
  timer.textContent = `${m}:${s}.${ms}`;
  if (timer.textContent === '00:00.00') {
    clearInterval(clearTime);
  }
}

const main = document.querySelector('main');
const first_screen =  document.getElementById('first-screen');

const limit_s = 10;
const limit_ms = limit_s * 1000;
let startTime;
let clearTime;
const words = [
  'patao',
  'hikakin',
  'masuo',
]  

const start_btn =  document.getElementById('start-btn');
start_btn.onclick = () => {
  first_screen.remove();
  main.appendChild(playing_screen);
  startTime = Date.now();
  clearTime = setInterval(() => {
    countUp();
  }, 10);  
}  

const playing_screen = document.createElement('div');
const timer = document.createElement('p');
timer.classList.add('timer');
playing_screen.appendChild(timer);


const word = document.createElement('p');
word.classList.add('word');
word.textContent = words[Math.floor(Math.random() * words.length)];
playing_screen.appendChild(word);
let currentKeyId = 0;
let currentKey = word.textContent.charAt(currentKeyId);


document.addEventListener('keydown',(event) => {
  if (event.key === currentKey) {
    currentKeyId++;
    console.log(currentKeyId)
  }
});

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

currentKeyIdを増やしているのに、CurrentKeyの変数が更新されない

currentKey を更新していないからです。currentKeyId を更新しても、独立した変数である currentKey が自動的に更新されることはありません。

javascript
1  if (event.key === currentKey) {
2    currentKeyId++;
3    console.log(currentKeyId)
4    currentKey = word.textContent.charAt(currentKeyId); // ←ここを追加
5  }