javascriptで作ったタイピングゲームが最初の文字しか動きません

とあるソースコードをコピペしたのですが、cssが先頭の文字のみ適用され、その後の文字には反応しません。
ブラウザはChromeですが、サファリでも同じ動きになってしまいます。
リンク内容

該当のソースコード

var p = document.getElementById('text');

//タイピングする文字列をここで用意しておく
var textLists = [
    'Hello World',
    'This is my App',
    'How are you?',
    'Hello Hello',
    'I love JavaScript!',
    'Good morning',
    'I am Japanese',
    'Let it be'
];
var checkTexts = [];


createText();

function createText() {
    //文字列をランダムに取得する
    var rnd = Math.floor(Math.random() * textLists.length);

    //前の文字列を削除してから次の文字列を表示する
    p.textContent = '';
    
    //文字列を1文字ずつに分解して、それぞれにspanタグを挿入する
    checkTexts = textLists[rnd].split('').map(function(value) {
        var span = document.createElement('span');

        span.textContent = value;
        p.appendChild(span);

        return span;
    });
}

document.addEventListener('keydown', keyDown);


function keyDown(e) {

    //キーボードからの入力は「e.key」に格納されている
    if(e.key === checkTexts[0].textContent) {
        checkTexts[0].className = 'add-blue';

        //0番目の配列要素を削除して、次の1文字を比較対象にする
        checkTexts.shift();

        //配列要素が空っぽになったら次の問題を出す
        if(!checkTexts.length) createText();
    }
}

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

chromeは73.0で最新バージョンです。
fire Foxも同じ反応で、66.0.2の最新です。
safariも最新です。
テキストエディタはamomを使っています。

Lhankor_Mhy

2019/03/30 07:40

Chrome73 Firefox66 で「cssが先頭の文字のみ適用され、その後の文字には反応しません」という問題が再現しませんでした。なお、IE11では問題が起きましたが、「cssが先頭の文字のみ適用され、その後の文字には反応しません」というものではありませんでした。どうも空白の文字を textContent プロパティにセットする時に失敗しているみたい。

Lhankor_Mhy

2019/03/30 13:03

繰り返しになりますが、Chrome73 Firefox66 で「cssが先頭の文字のみ適用され、その後の文字には反応しません」という問題が再現しませんでした。 ↓質問者の環境で動作しますか？ https://jsfiddle.net/Lhankor_Mhy/bo7wyL08/ もし、動作しないのであれば、環境の問題かと思います。もし、動作するのであれば、こちらのコードとそちらのコードに差異があると思われますので、問題の再現するコードをご提示ください。