javaScriptでタイピングゲームを作っている途中なのですが、入力した後に次の文字が表示されません。

初めまして。
なおやと申します。
ドットインストールでjavaScriptを勉強しています。
タイピングゲームを作っているのですが、文字を打っても次の文字が表示されません。
例、正しい場合red(入力)→_ _ →(次の文字が表示)bule
誤りな場合red(入力)→ _ _→(次の文字が表示されない)
次の文字を表示したいのですが、どうすればいいのかわかりません。
何度もドットインストールで紹介されていたコードと照らし合わし確認をしたのですが、打ち間違いや書き忘れはないと思います。
エラーはコンソールログで確認をしたところなかったと思います。
申し訳ないのですが、どなたか教えていただけますでしょうか。
コードを添付いたします。
初学者なのでコードがわかりずらいかもしれませんが、ご了承ください。
よろしくお願いします。
'use strict';
{
const words = [
'apple',
'sky',
'blue',
'red',
];
let word = words[Math.floor(Math.random() * words.length)];

let loc = 0;
let score = 0;
let miss = 0;

const target = document.getElementById('target');
const scoreLabel = document.getElementById('score');
const missLabel = document.getElementById('miss');

function updateTarget (){
let placeholder = '';
for (let i = 0; i < loc; i++){

    placeholder += '_';
  }
  target.textContent = placeholder + word.substring(loc);
}

　　　 window.addEventListener('click', () =>{
target.textContent = word;
});

window.addEventListener('keydown', e => {
if(e.key === word[loc]){
  loc++;
  if(loc === word.langth){
    word = words[Math.floor(Math.random() * words.length)];
    loc = 0;
   }
  updateTarget();
  score++;
  scoreLabel.textContent = score;

　　　}else{
miss++;
missLabel.textContent = miss;
}
});
}

HTMLです。↓

<!DOCTYPE html> <html lang = "ja"> <head> <meta charset="utf-8"> <title>タイピング</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <p id="target">click to start</p> <p class="info"> Letter count:<span id="score">0</span> Miss count:<span id="miss">0</span> 　　 </p> <script src="js/main.js"></script> </body> </html>