Вы немного не понимаете, как работают события (судя по этому, и предыдущему вопросу). Грубо говоря, метод document.addEventListener("keypress", checkKeyEvent) создает событие нажатия на клавишу клавиатуры, которое будет выполнять переданную функцию. Если нажать клавишу, то выполняется событие keypress, которое выполнит функцию checkKeyEvent, в которую передается объект события (а в нем и нажатая клавиша).
Не нужно вызывать добавление события в цикле, вызовете один раз, и уже в функции checkKeyEvent делайте проверку.
function checkKeyEvent(event) {
// При нажатии на клавишу выполняется эта функция. Каждый раз.
}
document.addEventListener("keypress", checkKeyEvent);
Ваш цикл
while(counterLetters < levelText.length) { будет бесконечным, т.к. значение levelText или counterLetters не меняются. Даже если бы он не был вечен, он бы породил множество обработчиков событий, а нам нужно только одно. Циклы тут вообще не нужны. Вот такой код. Постарался подробно прокомментировать.
let mistakesCounter = 0;
// Это ваша getChar. Не знаю точно, такая же реализация, но это довольно известный код
function getChar(event) {
if (event.which == null) { // IE
if (event.keyCode < 32) return null; // спец. символ
return String.fromCharCode(event.keyCode)
}
if (event.which != 0 && event.charCode != 0) { // все кроме IE
if (event.which < 32) return null; // спец. символ
return String.fromCharCode(event.which); // остальные
}
return null; // спец. символ
}
function checkUsersKey(levelText) {
var theEnd = false;
var counterLetters = 0;
var keyName;
function checkKeyEvent(event) {
// Делаем проверку, если текущий символ равен длинне символов...
if (counterLetters >= levelText.length) {
// То удаляем обработку события чтобы завершить печатанье.
document.removeEventListener('keypress', checkKeyEvent);
// Тут можете вывести сообщение пользователю, что задание закончено
return;
}
keyName = getChar(event);
// Это ваш код, проверяет, правильно ли пользователь ввел
if (levelText[counterLetters] == keyName) {
alert("Проверка 1 (значение true): работает"); //просто проверка
counterLetters++;
//тут будет код, который меняет css буквы
} else if (keyName == null) {
//do nothing
alert("Проверка 2")
} else {
alert("Проверка 3 (else): работает");
//тут будет код, оповещающий о том, что пользователь допустил ошибку
mistakesCounter++;
}
}
// Добавляем обработку события нажатия клавиши на функцию checkKeyEvent
// Добавляем только один раз, она будет вызывать checkKeyEvent после каждого нажатия и удержания клавиши
document.addEventListener("keypress", checkKeyEvent);
}
checkUsersKey("something");
