タイピングゲームで正しく打った数をカウントしたいのだが，1文字目だけカウントされない。

タイピングゲームを作成しています。正しく打った数をカウントする機能を付けたいのですが
”apple”と入力する時，最初の "a" だけ正しく打っても Letter Score (正しく打った数）が変化しません。コードのどこに誤りがありますでしょうか？

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>タイピングゲーム</title>
7  <link rel="stylesheet" href="css/styles.css">
8</head>
9<body>
10  <p id="target">word</p>
11  <p class="info">
12    Letter score<span id="score">0</span>
13    Miss score<span id="miss">0</span>
14  </p>
15  <script src="js/main.js"></script>
16</body>
17</html>

JavaScript
1"use strict";
2
3{
4  const target = document.getElementById("target");
5  const scoreLabel=document.getElementById("score");
6  const missLabel=document.getElementById("miss");
7  
8  const word ="apple";
9  let score=0;
10  let miss=0;
11  let loc = 0;
12
13  target.textContent=word;
14  
15  
16  window.addEventListener("keydown",e=>{
17    console.log(e.key);
18    if(e.key===word[loc]){
19      console.log("score");
20      loc++;  
21      scoreLabel.textContent=score;
22      score++;
23    }else{
24      console.log("miss");
25      missLabel.textContent=miss;
26      miss++;
27    }
28
29  })
30}

css
1body {
2  padding-top: 40px;
3  font-family: 'Courier New', monospace;
4  text-align: center;
5}
6
7#target {
8  font-size: 48px;
9  letter-spacing: 3px;
10}
11
12.info {
13  color: #ccc;
14}